Google Maps MarkerClusterer：聚合标记选项不生效及自定义图标问题

问题诊断 #

• 构造函数参数错误：@googlemaps/markerclusterer的配置项无需嵌套在clusterOptions中，应直接将styles、gridSize等作为顶层属性传入构造函数。
• 事件监听对象错误：clusterclick事件需绑定到markerCluster实例上，而非markers数组。

修正后的代码 #

markers.push(marker);

const clusterStyles = [
  {
    url: 'https://developers.google.com/maps/documentation/javascript/examples/clusterer/m3.png',
    textColor: 'white',
    textSize: 14,
    width: 50,
    height: 50,
  },
];

// 直接定义配置项，无需嵌套clusterOptions
const markerClusterOptions = {
  styles: clusterStyles,
  gridSize: 50,
  maxZoom: 15,
  minimumClusterSize: 3,
};

// 构造函数直接传入配置项
const markerCluster = new markerClusterer.MarkerClusterer({ 
  map, 
  markers, 
  ...markerClusterOptions
});

// 绑定事件到markerCluster实例
google.maps.event.addListener(markerCluster, 'clusterclick', onClusterClick);

修改聚合标记选项的方法 #

1. 初始化时配置：创建MarkerClusterer实例时直接传入所需参数，比如调整gridSize（聚合网格大小）、maxZoom（取消聚合的最大缩放级别）、minimumClusterSize（触发聚合的最小标记数）等。
2. 动态更新选项：实例创建后如需修改配置，需先调用markerCluster.clearMarkers()清除现有标记，再重新创建MarkerClusterer实例并传入新配置。目前该库无直接修改配置的API，需通过重新实例化实现。

自定义聚合图标 #

1. 单级样式自定义：在clusterStyles数组中定义单个样式对象，指定url（图标地址）、width/height（图标尺寸）、textColor（文本颜色）、textSize（文本大小）等属性，示例代码已展示该方式。
2. 多级样式自定义：可根据聚合标记数量定义不同样式，数量越多将自动匹配数组中靠后的样式：

const clusterStyles = [
  {
    url: 'path-to-small-cluster-icon.png',
    textColor: 'white',
    textSize: 12,
    width: 40,
    height: 40,
    textAnchor: [20, 20]
  },
  {
    url: 'path-to-medium-cluster-icon.png',
    textColor: 'white',
    textSize: 14,
    width: 50,
    height: 50,
    textAnchor: [25, 25]
  },
  {
    url: 'path-to-large-cluster-icon.png',
    textColor: 'white',
    textSize: 16,
    width: 60,
    height: 60,
    textAnchor: [30, 30]
  }
];

内容的提问来源于stack exchange，提问作者정도영