[英]Creating multiple markers with Angular Google Maps from an API
我正在嘗試使用AGM軟件包在Google Map中創建多個標記。 如果我嘗試使用從API提取的數據來創建緯度和經度,則可以創建多個標記,從而對其進行硬編碼,但我無法使其正常工作。
如果我在“ p”標簽中執行ngFor以顯示緯度和經度,則可以正確顯示數據,但由於某些原因,它無法創建agm標記。 這是我的代碼:
component.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);
});
}
component.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>
您可以嘗試此解決方案
我已經在Stackblitz上創建了一個演示
Component.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)
})
}
}
}
Component.html
<agm-marker
*ngFor="let m of markers;"
[latitude]="m.lat"
[longitude]="m.long">
</agm-marker>
我正在使用Angular 6
Up對我有很大幫助,但仍有一些問題需要解決。 您可以像使用Krishna一樣使用for()或像我一樣使用.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']非常重要。
我不確定使用[latitude]或[(latitude)]有什么區別,我認為這與接口有關,但是即使我不使用任何接口,也看不出任何區別。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.