Отображение только одного маркера, когда в Angular Google Map должно быть несколько

Question

Я использую Angular Google Map с https://angular-maps.com/. Я хотел показать несколько маркеров, используя директиву ngFor для элемента agm-marker. Хотя DOM показывает, что все маркеры присутствуют, пользовательский интерфейс показывает только первый на карте.

Вот часть 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 для моего проекта

Answer 1

Я советую вам перейти по этой ссылке https://www.npmjs.com/package/@agm/js-marker-clusterer.

Затем присоедините ваш цикл for в этом разделе кода:

<agm-marker [latitude]="51.673858" [longitude]="7.815982"></agm-marker>

широта]="51.673858" [долгота]="7.815982">

Answer 2

Дополнение к ответу предоставлено @Dasikely

Я использовал один и тот же js-marker-clusterterer и реализовал несколько маркеров, используя приведенное ниже решение.

В компоненте я объявил массив маркеров.

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>