angular-leaflet-指令。如何绑定标记？

Question

我正在尝试在angular-leaflet-directive中设置标记。当我尝试绑定标记时，我遇到了一些问题。

html：

 <leaflet defaults="defaults" markers="markers"  center="center" layers="layers" defaults="defaults" height="800px" width="100%"></leaflet>

和控制器：

angular.module('MapCtrl', ["leaflet-directive"])
.controller('MapController', ['$scope','$http', function($scope, $http) {      

$scope.tagline = 'Maps content';

angular.extend($scope,  {

       defaults: {
        tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
        maxZoom: 14,
        path: {
            weight: 10,
            color: '#800000',
            opacity: 1
        }
    },
    center: {
        lat: 52.218374, 
        lng: 19.594210,
        zoom: 7
    },
    markers: { },

    layers: {
            baselayers: {
                osm: {
                    name: 'OpenStreetMap',
                    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    type: 'xyz'
                },
                landscape: {
                    name: 'Landscape',
                    url: 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}\.png',
                    type: 'xyz'
                },

            }
        },
});   

 var pos = [
    {            
        "lat": "51.918374",
        "lng": "19.594210"
    },
    {            
        "lat": "51.018374",
        "lng": "19.094210"
    },
     {

        "lat": "52.518374",
        "lng": "19.594210"
    },
    {            
        "lat": "52.018374",
        "lng": "19.694210"
    }
];

var setMarkers = function () {


    var markers = {}; 
   angular.forEach(pos, function(value, key) {


                markers = {
                    lat: value.lat,
                    lng: value.lng,
                    message: 'aaa',
                    focus: true,
                    draggable: false
                };                   

            $scope.markers = markers;
            console.log(markers);
 });             

 };     
        setMarkers();    

}]);

当我尝试这个代码时，我收到了：

Object {lat: "51.918374", lng: "19.594210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
Object {lat: "51.018374", lng: "19.094210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
Object {lat: "52.518374", lng: "19.594210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
Object {lat: "52.018374", lng: "19.694210", message: "aaa", focus: true, draggable: false} Map2Ctrl.js:93
TypeError: Cannot read property 'lat' of null

In project page缺少有关数据绑定的信息，所以我正在尝试尝试。请给我一些建议，哪里出了问题。

PS。进一步的调查解决了我的问题。下面是工作代码：

var markers ={ };
var pos = [
{      
    lat: 51.918374,
    lng: 19.594210
},
{        
    lat: 51.018374,
    lng: 19.094210
},
 {        
    lat: 52.518374,
    lng: 19.594210
},
{        
    lat: 52.018374,
    lng: 19.694210
}];

 var i = 0;
 angular.forEach(pos, function(value, key) {
   markers[i++]={
     lat: value.lat,
     lng: value.lng,
     message: "aaaa",
     focus: false,
     draggable: false
    }
 };

$scope.markers =markers
});

Answer 1

你可以绑定到pos并改变你的模型。

<leaflet defaults="defaults" markers="pos" center="center" layers="layers" defaults="defaults" height="800px" width="100%"></leaflet>