Leaflet / AngularJS - 自动用户位置

时间:2015-03-30 10:55:32

标签: javascript angularjs ionic-framework leaflet angular-leaflet-directive

我正在尝试使用here给出一个很好的working example的传单程序,以便在我的Ionic应用程序中自动定位使用。 但是,我找到正确的语法以便在我的传单页面上嵌入代码时遇到一些麻烦。 谢谢你的帮助。

编辑解决方案:简单方法是使用" center autodiscover" Angular中的指令

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> 

0 个答案:

没有答案