angular - 如何在 Angular Google Maps 中使用 API 数据作为 Circles 的中心点

Question

我从 API 调用中获取数据，我想使用坐标作为 Angular Google Maps' Circle 的中心点。

TS 文件：

async getData() {
const loading = await this.loadingController.create({
  message: 'Loading'
});
await loading.present();
this.api.getData()
  .subscribe(res => {
    this.earthquake_status = res;
    if (this.earthquake_status && this.earthquake_status.length)  {
      for(let i=0; i< this.earthquake_status.length; i++){
        this.data = res[0].features;
       }
      }
      console.log(this.data);
      loading.dismiss();
    }, err => {
      console.log(err);
      loading.dismiss();
    });
}

HTML 文件：

<agm-map
      [zoom]="13"
      [style.height.px]="height"
      [latitude]="lat"
      [longitude]="lng">


 <div *ngFor="let eqdata of data" value="eqdata">
    <agm-circle
        [latitude]="eqdata.geometry.coordinates[0]" 
        [longitude]="eqdata.geometry.coordinates[1]" 
        [radius]="5000"
        [fillColor]="'red'"
        [circleDraggable]="true"
        [editable]="false"> 
    </agm-circle>
</div>

来自 API 的数据：

API 调用

我尝试将 *ngFor 放在 AGM-map 元素内，但地图不会加载。将 *ngFor 放在 agm-circle 元素内时也是如此。我是 Ionic 和 Angular 的新手，我将不胜感激任何帮助！

标签： angulartypescriptionic4angular-google-maps