如何自定义Google Maps MarkerClusterer的渲染器？

问题核心原因 #

你的自定义渲染器未生效，主要是这几个错误导致：

• 参数名不匹配：MarkerClusterer构造函数的配置项中，渲染器的参数名是renderer，但你传入的是my_renderer，库无法识别该自定义配置。
• SVG编码错误：直接用window.btoa处理带换行、空格的SVG字符串，会因不符合编码要求导致图标加载失败。
• 标记绑定冲突：创建普通标记时直接设置map: map，MarkerClusterer需要自行管理标记的显示/隐藏，提前绑定会干扰集群逻辑。
• 回调函数拼写错误：Google Maps API的回调参数写的是ini_map，但你的初始化函数名是init_map，会导致地图无法正常触发初始化。

修正后的完整代码 #

JavaScript 初始化逻辑 #

function init_map() {
  // 初始化地图
  const map = new google.maps.Map(document.getElementById("ljdp_map"), { 
    zoom: 2, 
    center: {lat:46.227638, lng:2.213749} 
  });

  // 创建标记数组（注意：不要直接绑定到map，交给MarkerClusterer管理）
  const markers = [];
  for (const ev of events) {
    markers.push(new google.maps.Marker({ position: ev.coordinates }));
  }

  // 自定义渲染器实现
  const customRenderer = {
    render({ count, position }) {
      // 移除SVG中的换行和多余空格，避免编码错误
      const cleanSvg = `<svg fill="#00ff00" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><circle cx="120" cy="120" opacity=".6" r="70" /></svg>`;
      // 正确编码SVG为base64
      const svgBase64 = btoa(unescape(encodeURIComponent(cleanSvg)));

      return new google.maps.Marker({
        position,
        icon: {
          url: `data:image/svg+xml;base64,${svgBase64}`,
          scaledSize: new google.maps.Size(45, 45),
        },
        title: `Cluster of ${count} markers`,
        zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
      });
    }
  };

  // 初始化MarkerClusterer，传入正确的renderer参数
  new markerClusterer.MarkerClusterer({ 
    map: map, 
    markers: markers, 
    renderer: customRenderer 
  });
}

HTML 脚本引入 #

<!-- 先引入MarkerClusterer库 -->
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<!-- 引入Google Maps API，修正回调函数名拼写 -->
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=init_map"></script>

备选方案：继承DefaultRenderer实现自定义 #

如果需要基于默认渲染器做修改，可以用继承的方式：

class CustomRenderer extends markerClusterer.DefaultRenderer {
  render(cluster, stats) {
    // 调用父类方法获取默认集群标记
    const marker = super.render(cluster, stats);
    // 修改标记属性
    marker.setIcon({
      url: "你的自定义图标URL",
      scaledSize: new google.maps.Size(45, 45)
    });
    return marker;
  }
}

// 使用时传入实例化的自定义渲染器
new markerClusterer.MarkerClusterer({ 
  map: map, 
  markers: markers, 
  renderer: new CustomRenderer() 
});

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