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
});
問題就解決了。以上是工作代碼。 – Darek 2014-09-29 10:34:24
你可以回答你自己的問題:) – 2014-09-29 11:09:07