我有一个使用谷歌地图的离子应用程序。我试图从数据json api获取航班路线的纬度和经度,然后数据json api然后将数据注入Google Maps折线。获取数据json api工作正常没有问题,但当我把对象放在谷歌地图我得到错误Error: Cannot find a differ supporting object '33.265625' of type 'number'. NgFor only supports binding to Iterables such as Arrays.
l使用forEach移动数组。
我的代码:
async getmarker(){
this.http.get('/v1/flightjson?flightId=201',{},{})
.then( data=>{
// this.latitude = JSON.parse(data.data).result.response.data.flight.track.latitude
// this.longitude = JSON.parse(data.data).result.response.data.flight.track
for(let datas of JSON.parse(data.data).result.response.data.flight['track']) {
this.longitude = datas.longitude
this.latitude = datas.latitude
console.log(this.longitude)
// Do something.
}
})
}
loadMap() {
let AIR_PORTS = [
this.latitude,
this.longitude
];
this.map = GoogleMaps.create('map_canvas');
let polyline: Polyline = this.map.addPolylineSync({
points: AIR_PORTS,
color: '#AA00FF',
width: 10,
geodesic: true,
clickable: true // clickable = false in default
});
polyline.on(GoogleMapsEvent.POLYLINE_CLICK).subscribe((params: any) => {
let position: LatLng = <LatLng>params[0];
let marker: Marker = this.map.addMarkerSync({
position: position,
title: position.toUrlValue(),
disableAutoPan: true
});
marker.showInfoWindow();
});
}
HTML
<div id="map_canvas"></div>
for(let datas of JSON.parse(data.data).result.response.data.flight['track']) {
this.longitude = datas.longitude
this.latitude = datas.latitude
}
在上面的for
循环中,我假设this.longitude
和this.latitude
将是数组。您应该在push
和this.longitude
内部使用this.latitude
元素(如下所示),而不是替换之前的值。
this.longitude.push(datas.longitude);
this.latitude.push(datas.latitude);
您可能正在使用这些变量迭代地图上的不同点,因为它们是普通数字,ngFor
将抛出一个错误,说ngFor
中的内容应该是iterable
。 Array
是iterable
而number
不是。