2

私は、Ionic アプリでの使用を自動的に見つけるため の優れた実用的な例を使用して、ここに記載されているリーフレットの手順に従おうとしています。しかし、リーフレットのページにあるコードを私のものに埋め込むための正しい構文を見つけるのに苦労しています。助けてくれてありがとう。

編集ソリューション:簡単な方法は、Angular で「center autodiscover」ディレクティブを使用することです

JS

.controller('MapCtrl', function($scope, leafletEvents) {
var map = L.map('map');
$scope.eventStatus = 'Map View';

angular.extend($scope, {
    defaults: {
        tileLayer: "http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png",
        maxZoom: 18,
        path: {
            weight: 10,
            color: '#800000',
            opacity: 1
        }
    },
    });

 function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng).addTo(map)
            .bindPopup("You are within " + radius + " meters from this point").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({setView: true, maxZoom: 16});


});

HTML:

    <ion-list>  
        <ion-item class="leaflet_custom_container">
            <div class="" ng-controller="MapCtrl" > <!-- -->
                <div id="map" data-tap-disabled="true"   >
                    <leaflet  defaults="defaults" height="450px" width="600px"  >
                    </leaflet>

            </div>
        </ion-item>
    </ion-list> 
4

0 に答える 0