Angular Google Map 中应该有多个标记时只显示一个标记答案

【问题标题】：Showing only one marker when there should be multiple in Angular Google MapAngular Google Map 中应该有多个标记时只显示一个标记
【发布时间】：2018-03-09 17:02:59
【问题描述】：

我正在使用来自 https://angular-maps.com 的 Angular 谷歌地图。我想在 agm-marker 元素上使用 ngFor 指令显示多个标记。尽管 DOM 显示所有标记都存在，但 UI 仅显示地图上的第一个标记。

这里是 HTML 部分：

<agm-map [latitude]="lat" [longitude]="long" [zoom] = 16>
<agm-marker *ngFor="let m of latlongs; let i = index"
[latitude]="m.lat"
[longitude]="m.long"
[markerDraggable]="m.draggable"></agm-marker>

</agm-map>

打字稿代码在这里：

 this.service.getData().subscribe(data => {
  let json: any[] = []; 
  json["data"] = data.json().map(it => {
    it["category"] = "location";
    it["gallery"] = ["../assets/img/area.png"];
    return it;
  });

  for(let i = 0; i < json["data"].length; i++){
    this.mapInfos.push({lat: +json["data"][i].lat, long: +json["data"][i].long});
  }

  this.latlongs = this.mapInfos;

});

我在我的项目中使用 angular 4

【问题讨论】：

标签： angular angular-google-maps

【解决方案1】：

我建议你点击这个链接https://www.npmjs.com/package/@agm/js-marker-clusterer。

然后在此代码部分中附加您的 for 循环：

&lt;agm-marker [latitude]="51.673858" [longitude]="7.815982"&gt;&lt;/agm-marker&gt;

latitude]="51.673858" [longitude]="7.815982">

【讨论】：

【解决方案2】：

@Dasikely 提供的答案的补充

我使用相同的js-marker-clusterer 并使用以下解决方案实现了多个标记。

在组件中，我声明了一个标记数组。

markers: any[];

用来自服务的数据更新了这个标记。

private onData(data) {
    this.markers = [];
    for (const item of data) {
        this.markers.push({
            lat: item.latitude,
            lng: item.longitude
        });
    }
}

最后使用ngFor在视图中使用它们。

<agm-map [latitude]="initialLatitude" [longitude]="initialLongitude" [zoom]="zoom">
    <agm-marker-cluster *ngFor="let marker of markers" imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
        <agm-marker [latitude]="marker.lat" [longitude]="marker.lng">
        </agm-marker>
    </agm-marker-cluster>
</agm-map>

【讨论】：