如何获取AGM谷歌地图标记聚类中同一分组的各标记信息

步骤1：调整模板配置 #

给agm-marker-cluster添加模板引用变量与聚类点击事件绑定，同时给agm-marker新增自定义业务数据绑定，修改后代码如下：

<agm-map #agmMap [latitude]="latitude" [longitude]="longitude" [zoom]="zoomMap" [fitBounds]="true"
         (boundsChange)="checkMarkersInBounds($event)" [scrollwheel]="null">
  <agm-marker-cluster #markerCluster [maxZoom]="maxZoom" [gridSize]="50" [averageCenter]="true"
                      (clusterClick)="onClusterClick($event)"
                      imagePath="https://raw.githubusercontent.com/googlearchive/js-marker-clusterer/gh-pages/images/m">
    <agm-marker *ngFor="let data of mapArrayListAccordingParams;let i=index" [latitude]="data.latitude"
                [longitude]="data.longitude" [agmFitBounds]="true" [gestureHandling]="cooperative"
                [markerOptions]="{customData: data}"
                (markerClick)="clickedMarker(infowindow,data);selectedEmp = data;newSelectedEmp.push(data)">
    </agm-marker>
  </agm-marker-cluster>
</agm-map>

步骤2：编写组件逻辑 #

在组件类中获取聚类实例、实现点击事件的回调逻辑，即可拿到同组内所有标记的业务信息：

import { Component, ViewChild } from '@angular/core';
import { AgmMarkerCluster } from '@agm/markerclusterer';

@Component({
  // 你的组件原有配置
})
export class YourMapComponent {
  @ViewChild('markerCluster') markerCluster: AgmMarkerCluster;
  // 保留你的其他原有变量，比如mapArrayListAccordingParams、latitude等

  // 聚类点击事件处理方法
  onClusterClick(cluster: any) {
    // 获取当前聚类组内所有原生Marker实例
    const clusterMarkers = cluster.getMarkers();
    // 提取所有标记绑定的自定义业务数据
    const clusterMarkerInfos = clusterMarkers.map(marker => marker.get('customData'));
    
    // 此处clusterMarkerInfos即为同一聚类组下所有标记的具体信息，可按需求处理
    console.log('同组标记信息：', clusterMarkerInfos);
  }
}

补充说明 #

• 需确保@agm/markerclusterer依赖的版本和你项目中@agm/core的版本匹配
• 回调返回的cluster为MarkerClusterer的原生实例，还可调用getSize()获取组内标记数量、getCenter()获取聚类中心点坐标等原生方法

内容的提问来源于stack exchange，提问作者Haneesh A