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