如何添加多個標記角度谷歌地圖？

Question

我使用了來自 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>

和這個 component.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添加多個標記？

Answer 1

如果您在數組的每個項目中都定義了 lat 和 long

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

Answer 2

很有可能您的所有標記都正確顯示在地圖上； 但地圖僅以其中一個為中心； 嘗試縮小並親眼看看。

從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>

Answer 3

你為什么要為你的data.lat_long[0]引用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 模型是如何設置的

Answer 4

組件.html

<agm-map [latitude]='lat' [longitude]='lng'>
    <agm-marker *ngFor='let loc of mylocations' [latitude]='loc.lat' [longitude]='loc.lng'></agm-marker>
</agm-map>

組件.ts

private mylocations = [
    { lat: 7.423568, lng: 80.462287 },
    { lat: 7.532321, lng: 81.021187 },
    { lat: 6.117010, lng: 80.126269 }
];