从API使用Angular Google Maps创建多个标记

Question

我正在尝试使用 AGM 包在 Google 地图中创建多个标记。虽然如果我尝试使用从 API 获取的数据创建它们，我可以创建多个标记对纬度和经度进行硬编码，但我无法使其工作。

如果我在"p"标签中执行 ngFor 以显示纬度和经度，它会正确显示数据，但由于某种原因，它无法创建 agm 标记。这是我的代码：

组件.ts

gps_lats: Array<number>;
gps_longs: Array<number>;
constructor(private _api: ApiService) { }
ngOnInit() {
this._api.machinesLocation().subscribe(res => {
this.gps_lats = Object.values(res['data']).map(({ lat }) => lat);
this.gps_longs = Object.values(res['data']).map(({ long }) => long);
});
}

组件.html

<div class="card ">
<agm-map [latitude]="39.9" [longitude]="-0.16">
<agm-marker *ngFor="let machine of gps_lats; index as i" [latitude]="gps_lats[i]" [longitude]="gps_longs[i]">
</agm-marker>
</agm-map>
</div>

Answer 1

您可以尝试使用此解决方案

我已经在堆栈闪电战上创建了一个演示

组件.ts

markers: Arary<any>=[];
ngOnInit() {
this._api.machinesLocation().subscribe((res: any) => {
for(let data in res.data){
this.markers.push({
lat: parseInt(res.data[data].lat),
long: parseInt(res.data[data].long)
})
}
}
}

组件.html

<agm-marker 
*ngFor="let m of markers;"
[latitude]="m.lat"
[longitude]="m.long">
</agm-marker>

Answer 2

我正在使用Angular 6

Up帮助了我很多，但仍有一些事情需要解决。你可以像我一样使用 for(( 作为 Krishna 或 .forEach((，两者都应该工作。

public markers: [] = [];
lat: number = 51.247680;
lng: number = 22.561402780001;
zoom: number = 15;

this.httpService.getBusstops().subscribe( 
// "key" is not even needed here, it's just leftover of(from?) my previous idea 
res => { res['response'].forEach((stop, key) => {
this.markers.push({
lat: parseFloat(stop['latitude']), // In api I have one "step" less than OP so I'm not doing 'res['response'].stop'
lng: parseFloat(stop['longitude']),
label: stop['name']
}) 
})} console.log(this.markers);    
)

接下来，在 html 中

<agm-map [(latitude)]="lat" [(longitude)]="lng" [(zoom)]="zoom" [disableDefaultUI]="true" [zoomControl]="true" [(fitBounds)]='viewport'>
<agm-marker *ngFor="let marker of markers" [latitude]="marker['lat']" [longitude]="marker['lng']">
<agm-info-window>
<p>{{ marker.label }}</p>
</agm-info-window>
</agm-marker>
</agm-map>

将字符串索引作为 x['y'] 很重要。

我不确定使用 [纬度]或 [(纬度(] 有什么区别和小麦，我认为这与接口有关，但即使我没有使用任何接口，我也看不出有什么区别。