Marker Cluster渲染默认谷歌标记图标覆盖自定义标记图标问题

API 探路者

2026-7-7

解决Google Map MarkerClusterer同时显示默认与自定义标记图标的问题

以下是针对性的排查和解决步骤：

确保所有Marker都明确设置自定义图标
遍历数据库返回的点位创建Marker时，必须为每个Marker实例的icon属性赋值，不能依赖默认逻辑。示例代码：

// 遍历点位数据创建Marker
const markers = data.map(point => {
  return new google.maps.Marker({
    position: { lat: point.lat, lng: point.lng },
    map: map,
    // 明确指定自定义图标，确保每个Marker都有配置
    icon: {
      url: 'https://your-s3-url/custom-marker.png',
      scaledSize: new google.maps.Size(30, 30) // 根据需求调整图标尺寸
    }
  });
});

// 初始化聚合器
new MarkerClusterer({ map, markers });

重点检查是否存在部分点位因数据缺失（比如关联的图标字段为空）导致未设置自定义图标的情况，这种场景下Marker会自动 fallback 到Google Map的默认标记样式。

排查MarkerClusterer的配置冲突
确认MarkerClusterer初始化时没有覆盖单个Marker的icon设置。如果使用了renderer自定义聚合样式，要确保renderer逻辑中没有重置Marker的icon属性，仅专注于聚合簇的样式渲染。

处理图标加载的异步问题
即使图标已托管在S3，若图标加载速度慢于Marker渲染，可能会短暂显示默认图标后再替换为自定义图标。可以提前预加载自定义图标，确保Marker创建时图标已加载完成：

// 预加载图标工具函数
function preloadIcon(url) {
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = () => resolve(url);
    img.src = url;
  });
}

// 先完成图标预加载，再创建Marker和聚合器
preloadIcon('https://your-s3-url/custom-marker.png').then(() => {
  // 此处执行Marker创建与聚合器初始化逻辑
});