angular - 从 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>

标签： angulargoogle-maps

Answer 1

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

我在Stackblitz上创建了一个演示

组件.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>