与Leafletjs angularjs [英] angularjs with Leafletjs

问题描述

继directie code是 http://jsfiddle.net/M6RPn/26/
我想，有许多lat和长JSON提要..我可以得到$资源上的JSON或$ HTTP的角很容易，但我怎样才能把它交给该指令映射事情在地图上？

  module.directive（'闷棍'，函数（）{
    返回{
        限制：'E'，
        更换：真实，
        模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
        链接：功能（范围，元素，ATTRS）{
            VAR地图= L.map（attrs.id，{
                中心：[40，-86]
                变焦：10
            }）;
            //创建一个CloudMade图块层，并将其添加到地图
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                MAXZOOM：18
            }）AddTo就（图）。            //动态添加标记
            VAR点= [{纬度：40，经度：-86}，{纬度：40.1，经度：-86.2}];
            对于（以点变种p）的{
                L.marker（[点[P] .lat，点[P] .lng]）AddTo就（图）。
            }
        }
    };
}）;
 

解决方案

我不知道了很多关于传单或你想要做什么，但我会假设你想传递一些坐标从您的控制器你的指令？

其实有很多方法可以做到这一点... ...这最好的利用涉及范围。

下面是从你的控制器数据传递到指令的一种方式：

  module.directive（'闷棍'，函数（）{
    返回{
        限制：'E'，
        更换：真实，
        模板：'＆LT; D​​IV＆GT;＆LT; / DIV＆GT;，
        链接：功能（范围，元素，ATTRS）{
            VAR地图= L.map（attrs.id，{
                中心：[40，-86]
                变焦：10
            }）;
            //创建一个CloudMade图块层，并将其添加到地图
            L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', {
                MAXZOOM：18
            }）AddTo就（图）。            //动态添加标记
            VAR点= [{纬度：40，经度：-86}，{纬度：40.1，经度：-86.2}];
            updatePoints（点）;            功能updatePoints（PTS）{
               为（以点变种P）{
                  L.marker（[PTS [P] .lat，PTS [P] .lng]）AddTo就（图）。
               }
            }            //在范围添加监视更新您的观点。
            //传递到任何财产范围
            //将poinsource =属性现在将更新点
            范围。$腕表（attr.pointsource，功能（价值）{
               updatePoints（值）;
            }）;
        }
    };
}）;
 

下面的标记。在这里您要添加的属性pointsource功能正在寻求建立$表的链接。

 ＆LT; D​​IV NG-应用=leafletMap＆GT;
    ＆LT; D​​IV NG控制器=MapCtrl＆GT;
        ＆LT; SAP ID =地图pointsource =pointsFromController＆GT;＆LT; / SAP＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

然后在您的控制器必须你可以更新属性。

 函数MapCtrl（$范围，$ HTTP）{
   //这里你可以更新属性。
   $ scope.pointsFromController = {[纬度：40，经度：-86}，{纬度：40.1，经度：-86.2}];   //这里的一些人为控制的方法来演示更新属性。
   $ scope.getPointsFromSomewhere =功能（）{
     $ http.get（'/ GET /点/从/某处）。成功（功能（somepoints）{
         $ scope.pointsFromController = somepoints;
     }）;
   }
}
 

Following directie code is from http://jsfiddle.net/M6RPn/26/ I want to get a json feed that has many lat and long.. I can get a json with $resource or $http in Angular easily but How can I feed it to this directive to map thing on the map?

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);
            }
        }
    };
});

解决方案

I don't know a lot about Leaflet or what you're trying to do, but I'd assume you want to pass some coordinates in from your controller to your directive?

There are actually a lot of ways to do that... the best of which involve leveraging scope.

Here's one way to pass data from your controller to your directive:

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);
            });
        }
    };
});

Here's the markup. In here you're adding that pointsource attribute the link function is looking for to set up the $watch.

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

Then in your controller you have a property you can just update.

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;
     });
   }
}

这篇关于与Leafletjs angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！