我正在为AngularJS的个人训练制作一个小应用程序,我收到了一些错误。
我从API接收Json数据,然后我想为我得到的每个对象显示一个标记。问题是我有一个控制台错误,所以我认为我犯了一个错误。
这是我的控制器
toulouseVeloControllers.controller('toulouseVeloListCtrl', ['$scope', '$http',
function($scope, $http) {
angular.extend($scope, {
osloCenter: {},
markers: {},
defaults: {
scrollWheelZoom: false
}
});
$http.get('https://api.jcdecaux.com/vls/v1/stations?contract=toulouse&apiKey=*********************************').success(function(data) {
$scope.bornes = data;
for (var i = 0; i < data.length; i++) {
$scope.markers.osloMarker = {
lat: data[i].position.lat,
lng: data[i].position.lng,
message: data[i].name,
focus: true,
draggable: false
};
$scope.osloCenter = {
lat: data[1].position.lat,
lng: data[1].position.lng,
zoom: 15
};
}
console.log(data.position.lat);
console.log(data.position.lng);
});
}]);
在我的地图中,我只有最后一个物体的标记。在控制台中我有“TypeError:无法读取未定义的属性'lat'”
当我尝试在地图之外显示我的所有对象时,在带有ng-repeat的列表中,我没有问题。
这是我的HTML:
<div ng-controller="toulouseVeloListCtrl">
<leaflet markers="markers" center="osloCenter" style="width: 100%; height: 500px;"></leaflet>
</div>
知道什么是错的?
非常感谢!!
答案 0 :(得分:1)
我想问题是:
console.log(data.position.lat);
也许你应该使用:
console.log(data[i].position.lat);
还有:
$scope.markers=[];
$scope.osloCenter=[];
for (var i = 0; i < data.length; i++) {
$scope.markers[i].osloMarker = {
lat: data[i].position.lat,
lng: data[i].position.lng,
message: data[i].name,
focus: true,
draggable: false
};
$scope.osloCenter[i] = {
lat: data[1].position.lat,
lng: data[1].position.lng,
zoom: 15
};
}