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

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

如果您在数组的每个项目中定义了纬度和经度

 <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] 来表示您的经纬度？这让我怀疑你是否真的想要这个：

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

这完全取决于您的房间模型是如何设置的

Answer 4

component.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 }
];