2014-09-27 25 views
0

我想在角瓣葉指令設置標記。當我嘗試綁定標記時遇到一些問題。角單張指示。如何綁定標記?

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

問題就解決了。以上是工作代碼。 – Darek 2014-09-29 10:34:24

+0

你可以回答你自己的問題:) – 2014-09-29 11:09:07

回答

-1

您可以綁定到pos並更改模型。

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