与Leafletjs的angularjs
发布时间:2020-12-17 07:20:37 所属栏目:安全 来源:网络整理
导读:以下直接代码来自 http://jsfiddle.net/M6RPn/26/ 我想得到一个有很多lat和long的json feed ..我可以轻松地在Angular中获得带有$resource或$http的json但是如何将它提供给这个指令来映射地图上的东西? module.directive('sap',function() { return { restri
以下直接代码来自
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; }); } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |