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

【问题标题】：Creating multiple markers with Angular Google Maps from an API从 API 使用 Angular Google Maps 创建多个标记
【发布时间】：2018-12-11 09:46:40
【问题描述】：

我正在尝试使用 AGM 包在 Google 地图中创建多个标记。虽然我可以创建多个标记硬编码纬度和经度，但如果我尝试使用从 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>

【问题讨论】：

嗨@David 请提供machinesLocation服务的json res
jsoneditoronline.org/?id=45a9246fb7d04f0a86b0f7286a5adcd2
好的，我将在演示中创建一个 Stackblitz
嗨 @David 我已经发布了 Stackblitz 演示的解决方案。

标签： angular google-maps

【解决方案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>

【讨论】：

非常感谢克里希纳，这完全有效。当我使用 Angular 6 时，我不得不修复一些代码（只是用 res['data'] 而不是 res.data 获取数据的小事）'，但现在它可以工作了。

【解决方案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'] 很重要。

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

【讨论】：