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

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

为什么要为你的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模型的设置方式

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>

component.ts

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

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

4 个答案: