与Leafletjs的angularjs

以下直接代码来自 http://jsfiddle.net/M6RPn/26/
我想得到一个有很多lat和long的json Feed ..我可以轻松地在Angular中获得带有$resource或$http的json但是如何将它提供给这个指令来映射地图上的东西？

module.directive('sap',function() {
    return {
        restrict: 'E',replace: true,template: '<div></div>',link: function(scope,element,attrs) {
            var map = L.map(attrs.id,{
                center: [40,-86],zoom: 10
            });
            //create a CloudMade tile layer and add it to the map
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png',{
                maxZoom: 18
            }).addTo(map);

            //add markers dynamically
            var points = [{lat: 40,lng: -86},{lat: 40.1,lng: -86.2}];
            for (var p in points) {
                L.marker([points[p].lat,points[p].lng]).addTo(map);
            }
        }
    };
});

我不太了解Leaflet或你想要做什么,但我想你想要从你的控制器传递一些坐标到你的指令？

实际上有很多方法可以做到这一点……其中最好的方法是利用范围.

这是将数据从控制器传递到指令的一种方法：

module.directive('sap',lng: -86.2}];
            updatePoints(points);

            function updatePoints(pts) {
               for (var p in pts) {
                  L.marker([pts[p].lat,pts[p].lng]).addTo(map);
               }
            }

            //add a watch on the scope to update your points.
            // whatever scope property that is passed into
            // the poinsource="" attribute will Now update the points
            scope.$watch(attr.pointsource,function(value) {
               updatePoints(value);
            });
        }
    };
});

这是标记.在这里你要添加链接功能正在寻找设置$watch的pointsource属性.

<div ng-app="leafletMap">
    <div ng-controller="MapCtrl">
        <sap id="map" pointsource="pointsFromController"></sap>
    </div>
</div>

然后在你的控制器中你有一个你可以更新的属性.

function MapCtrl($scope,$http) {
   //here's the property you can just update.
   $scope.pointsFromController = [{lat: 40,lng: -86.2}];

   //here's some contrived controller method to demo updating the property.
   $scope.getPointsFromSomewhere = function() {
     $http.get('/Get/Points/From/Somewhere').success(function(somepoints) {
         $scope.pointsFromController = somepoints;
     });
   }
}

原文地址：https://www.jb51.cc/angularjs/141689.html