如何添加多个标记角谷歌地图？

Posted 2021-04-02

我使用了来自npm install @ agm / core的@ agm / core模块

这是我的代码

<agm-map [latitude]="lat" [longitude]="lng" >
<agm-marker *ngFor="let data of rooms"[latitude]="data.lat_long[0].lat" [longitude]="data.lat_long[0].long"></agm-marker>
</agm-map>

和这个组件.ts

export class ResultComponent implements OnInit {
  lat: number ;
  lng: number ;
  rooms = ROOMS;

  constructor() { }

  ngOnInit() {
    this.rooms = ROOMS;
    this.lat =  -6.914744;
    this.lng = 107.609810;

  }

}

但是这只显示了一个标记如何使用*ngFor添加多个标记？

答案

如果在阵列的每个项目中都有lat和long定义

 <agm-marker [latitude]="lat" [longitude]="long"></agm-marker>
   <agm-marker  *ngFor="let data of rooms; let i = index" [latitude]="data.lat" [longitude]="data.long">
 </agm-marker>

另一答案

很可能你的所有标记都正确显示在地图上;但是地图只围绕着其中一个;尝试缩小并亲眼看看。

启动rxjs @ 6，有一种方法可以自动居中/缩放地图上的标记AgmFitBounds：

<agm-map [latitude]="lat" [longitude]="lng" [fitBounds]="true">
  <agm-marker *ngFor="let data of rooms"
    [latitude]="data.lat_long[0].lat [longitude]="data.lat_long[0].long"
    [agmFitBounds]="true">
  </agm-marker>
</agm-map>

另一答案

为什么你的lat和long引用data.lat_long[0]？这让我想知道你是否真的想要这个：

<agm-marker  *ngFor="let data of rooms.lat_long" [latitude]="data.lat" [longitude]="data.long">

或这个

<agm-marker  *ngFor="let data of rooms" [latitude]="data.lat_long.lat" [longitude]="data.lat_long.long">

这完全取决于您的ROOMS模型的设置方式