Google Maps API：如何用MarkerClustererOptions与onClusterClick实现聚合标记点击弹窗？

要实现点击标记聚合体时显示信息窗口而非默认地图放大，可按以下步骤配置与编码：

核心操作要点 #

• 禁用默认放大：通过MarkerClustererOptions设置zoomOnClick: false，关闭点击聚合体自动放大的默认行为。
• 绑定自定义点击事件：通过onClusterClick选项传入自定义处理函数，在回调中生成并显示信息窗口。

完整修正代码示例 #

// 初始化地图
const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 37.7749, lng: -122.4194 },
  zoom: 10,
});

// 创建示例标记集合
const markers = [
  new google.maps.Marker({ position: { lat: 37.7749, lng: -122.4194 } }),
  new google.maps.Marker({ position: { lat: 37.7759, lng: -122.4184 } }),
  new google.maps.Marker({ position: { lat: 37.7739, lng: -122.4204 } }),
  // 可添加更多标记
];

// 初始化全局信息窗口实例
const infoWindow = new google.maps.InfoWindow();

// 定义聚合体点击处理函数
const clusterClickHandler = (cluster) => {
  // 获取聚合体内的所有标记
  const clusterMarkers = cluster.getMarkers();
  // 生成信息窗口内容（示例：展示标记数量与首个标记位置）
  const content = `
    <div>
      <h3>聚合体包含 ${clusterMarkers.length} 个标记</h3>
      <p>首个标记坐标：${clusterMarkers[0].getPosition().lat().toFixed(4)}, ${clusterMarkers[0].getPosition().lng().toFixed(4)}</p>
    </div>
  `;
  // 配置并打开信息窗口
  infoWindow.setContent(content);
  infoWindow.setPosition(cluster.getPosition());
  infoWindow.open(map);
};

// 初始化MarkerClusterer，应用配置与事件绑定
const markerCluster = new markerClusterer.MarkerClusterer({
  map: map,
  markers: markers,
  zoomOnClick: false, // 关键：禁用默认放大行为
  onClusterClick: clusterClickHandler, // 绑定自定义点击逻辑
});

常见问题排查 #

若之前设置zoomOnClick: false无效，可检查以下点：

• 配置位置错误：确保zoomOnClick是MarkerClusterer初始化配置的顶层属性，而非嵌套在子选项中。
• 事件冲突：排查是否有其他代码覆盖了聚合体的点击事件，导致自定义逻辑未触发。
• 版本适配：当前@googlemaps/markerclusterer最新版本中，zoomOnClick为顶层配置项，无需嵌套。

内容的提问来源于stack exchange，提问作者Sydney Linford