[英]$http angularJS loop for each object with leaflet issue
I'm making a little app for AngularJS personal training, and i'm getting a few errors. 我正在为AngularJS个人培训制作一个小应用程序,但遇到了一些错误。
I receive Json data from an API, and then I want to display amarker for every object I get. 我从API接收Json数据,然后我想为获取的每个对象显示一个标记。 The problem is that I have a console error, so I supposed I've made a mistake.
问题是我有一个控制台错误,所以我以为我做错了。
Here goes my controller 我的控制器来了
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);
});
}]);
In my map I only have a marker for my last object. 在地图上,我只有最后一个对象的标记。 And in the console I have "TypeError: Cannot read property 'lat' of undefined"
并且在控制台中,我有“ TypeError:无法读取未定义的属性'lat'”
When I try to display all my object outside of the map, in a list with ng-repeat, I have no problem. 当我尝试在地图外显示所有对象时,在带有ng-repeat的列表中,我没有问题。
Here go my HTML : 这是我的HTML:
<div ng-controller="toulouseVeloListCtrl">
<leaflet markers="markers" center="osloCenter" style="width: 100%; height: 500px;"></leaflet>
</div>
Any idea of what is wrong ? 知道什么是错的吗?
Thank you a lot !! 非常感谢 !!
I guess that problem is: 我想这个问题是:
console.log(data.position.lat);
Maybe you should use : 也许您应该使用:
console.log(data[i].position.lat);
And also: 并且:
$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
};
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.