以下直接代码来自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);
}
}
};
});
答案 0 :(得分：13)
我对Leaflet或者你想要做的事情了解不多，但我想你想把你控制器中的一些坐标传递给你的指令？
实际上有很多方法可以做到这一点......其中最好的方法是利用范围。
这是将数据从控制器传递到指令的一种方法：
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}];
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。
<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},{lat: 40.1, 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;
});
}
}
答案 1 :(得分：5)
我最近使用Angular JS和Leaflet构建了一个应用。与您描述的非常相似，包括来自JSON文件的位置数据。我的解决方案类似于blesh。
这是基本过程。
我的一个页面上有一个<map>元素。然后我有一个指令用Leaflet地图替换<map>元素。我的设置略有不同，因为我在工厂中加载了JSON数据，但我已经根据您的用例进行了调整（如果有错误则道歉）。在指令中，加载您的JSON文件，然后遍历您的每个位置（您需要以兼容的方式设置您的JSON文件）。然后在每个纬度/经度处显示标记。
<map id="map" style="width:100%; height:100%; position:absolute;"></map>
app.directive('map', function() {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
link: function(scope, element, attrs) {
var popup = L.popup();
var southWest = new L.LatLng(40.60092,-74.173508);
var northEast = new L.LatLng(40.874843,-73.825035);
var bounds = new L.LatLngBounds(southWest, northEast);
L.Icon.Default.imagePath = './img';
var map = L.map('map', {
center: new L.LatLng(40.73547,-73.987856),
zoom: 12,
maxBounds: bounds,
maxZoom: 18,
minZoom: 12
});
// create the tile layer with correct attribution
var tilesURL='http://tile.stamen.com/terrain/{z}/{x}/{y}.png';
var tilesAttrib='Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.';
var tiles = new L.TileLayer(tilesURL, {
attribution: tilesAttrib,
opacity: 0.7,
detectRetina: true,
unloadInvisibleTiles: true,
updateWhenIdle: true,
reuseTiles: true
});
tiles.addTo(map);
// Read in the Location/Events file
$http.get('locations.json').success(function(data) {
// Loop through the 'locations' and place markers on the map
angular.forEach(data.locations, function(location, key){
var marker = L.marker([location.latitude, location.longitude]).addTo(map);
});
});
}
};
{"locations": [
{
"latitude":40.740234,
"longitude":-73.995715
},
{
"latitude":40.74277,
"longitude":-73.986654
},
{
"latitude":40.724592,
"longitude":-73.999679
}
]}
答案 2 :(得分：1)
angularJs中的指令和mvc是不同的技术。指令通常在页面加载时执行。指令更适用于使用html和xml。一旦你拥有JSON，那么最好使用mvc框架来完成工作。
在页面呈现后，要应用指令，您经常需要执行$ scope。$ apply（）或$ compile来注册页面上的更改。
无论哪种方式，将服务转换为指令的最佳方法是使用依赖注入框架。
我注意到你的指令中缺少范围：true或scope：{}。这对指令与父控制器的效果有很大影响。
app.directive('mapThingy',['mapSvc',function(mapSvc){
//directive code here.
}]);
app.service('mapSvc',['$http',function($http){
//svc work here.
}])
指令由camelCase匹配应用。我会避免使用或因为IE的问题。替代方案是
<div map-thingy=""></div>
答案 3 :(得分：1)
假设你的控制器中有
$scope.points = // here goes your retrieved data from json
，您的指令模板是：
<sap id="nice-map" points="points"/>
然后在你的指令定义中你可以使用“=”simbol来设置你的指令范围和你的父范围之间的双向绑定
module.directive('sap', function() {
return {
restrict: 'E',
replace: true,
scope:{
points:"=points"
},
link: function(scope, element, attrs) {
var map = L.map(attrs.id, {
center: [40, -86],
zoom: 10
});
L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
for (var p in points) {
L.marker([p.lat, p.lng]).addTo(map);
}
}
};
});
此外，不是将标记直接添加到地图中，而是建议先将标记添加到L.featureGroup，然后将L.featureGroup添加到地图中，因为它有一个clearLayers（）方法，可以为您节省更新标记时有些令人头疼。
grupo = L.featureGroup();
grupo.addTo(map);
for (var p in points) {
L.marker([p.lat, p.lng]).addTo(grupo);
}
// remove all markers
grupo.clearLayers();
我希望这会有所帮助，欢呼