如何让Google Maps JavaScript API的缩放过程更流畅？

看起来你已经在性能优化上做了不少扎实的工作——优化SVG图标、设置聚类的maxZoom、尝试控制标记渲染，但缩放时还是出现卡顿，我来帮你梳理几个针对性的优化点，结合你的代码来调整：

1. 启用标记的优化渲染模式 #

Google Maps的Marker默认开启optimized: true，但自定义图标时显式声明更稳妥。这个选项会把标记渲染为Canvas元素而非DOM节点，大幅提升大量标记时的渲染性能。

修改你创建Marker的代码，加上optimized: true：

// 以BS标记为例，DV标记同理
const marker = new google.maps.Marker({
  position,
  icon: {
    url: iconUrl,
    scaledSize: new google.maps.Size(36, 36),
    anchor: new google.maps.Point(18, 36),
  },
  title: item.bs,
  optimized: true, // 显式开启优化渲染
});

聚类生成的标记也记得加上这个选项：

return new google.maps.Marker({
  position,
  label: { text: String(count), color: 'white', fontSize: '12px' },
  icon: {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 15,
    fillColor: 'purple',
    fillOpacity: 1,
    strokeColor: hasDown ? 'red' : 'purple',
    strokeWeight: 4,
  },
  zIndex: google.maps.Marker.MAX_ZINDEX + count,
  optimized: true, // 聚类标记也开启优化
});

2. 改进拖拽时的标记管理逻辑 #

你当前在dragstart时清空聚类标记、dragend时重新添加的方式，会触发大量标记的销毁与重建，这是卡顿的核心原因之一。改用可见性控制代替完全销毁：

// 替换原有的dragstart和dragend监听
google.maps.event.addListener(map, 'dragstart', () => {
  // 隐藏所有单个标记
  markersBS.forEach(marker => marker.setVisible(false));
  markersDV.forEach(marker => marker.setVisible(false));
  // 暂时移除聚类（避免拖拽时重绘）
  markerClusterBS.setMap(null);
  markerClusterDV.setMap(null);
});

google.maps.event.addListener(map, 'dragend', () => {
  const bounds = map.getBounds();
  if (!bounds) return;

  // 只显示当前视口内的标记
  const visibleBS = markersBS.filter(marker => bounds.contains(marker.getPosition()));
  const visibleDV = markersDV.filter(marker => bounds.contains(marker.getPosition()));
  
  visibleBS.forEach(marker => marker.setVisible(true));
  visibleDV.forEach(marker => marker.setVisible(true));

  // 更新聚类的标记集合并重新绑定到地图
  markerClusterBS.clearMarkers();
  markerClusterBS.addMarkers(visibleBS);
  markerClusterBS.setMap(map);

  markerClusterDV.clearMarkers();
  markerClusterDV.addMarkers(visibleDV);
  markerClusterDV.setMap(map);
});

这种方式避免了标记的频繁创建销毁，仅通过切换可见性来控制显示，性能提升非常明显。

3. 优化聚类渲染的计算开销 #

你的聚类渲染器中，hasDown/hasOffline的判断需要遍历所有聚类内的标记，当聚类规模大时会产生额外开销。可以在创建标记时提前聚合状态，或者在聚类初始化时缓存状态，但更简单的是：只在聚类需要更新时执行判断，同时避免不必要的遍历。

另外，聚类的renderer可以复用一些样式配置，减少重复创建对象：

// 提前定义聚类的基础样式
const clusterBaseStyles = {
  bs: { normalFill: 'purple', downStroke: 'red' },
  dv: { normalFill: 'blue', offlineStroke: 'red' }
};

// 以BS聚类为例
const markerClusterBS = new MarkerClusterer({
  map,
  markers: markersBS,
  maxZoom: 15,
  renderer: {
    render: ({ count, markers, position }) => {
      // some会在找到第一个匹配项后终止遍历，比filter更高效
      const hasDown = markers.some(marker => marker.isDown);
      const style = clusterBaseStyles.bs;

      return new google.maps.Marker({
        position,
        label: { text: String(count), color: 'white', fontSize: '12px' },
        icon: {
          path: google.maps.SymbolPath.CIRCLE,
          scale: 15,
          fillColor: style.normalFill,
          fillOpacity: 1,
          strokeColor: hasDown ? style.downStroke : style.normalFill,
          strokeWeight: 4,
        },
        zIndex: google.maps.Marker.MAX_ZINDEX + count,
        optimized: true,
      });
    },
  }
});

4. 减少高缩放级别的标记渲染压力 #

当缩放级别超过maxZoom:15时，聚类会解散，所有标记会直接显示。如果此时视口内标记数量过多，必然导致卡顿。可以监听zoom_changed事件，在高缩放级别下只渲染当前视口内的标记：

google.maps.event.addListener(map, 'zoom_changed', () => {
  const currentZoom = map.getZoom();
  const bounds = map.getBounds();
  if (!bounds) return;

  if (currentZoom > 15) {
    // 高缩放级别：只显示视口内的标记
    markersBS.forEach(marker => {
      marker.setVisible(bounds.contains(marker.getPosition()));
    });
    markersDV.forEach(marker => {
      marker.setVisible(bounds.contains(marker.getPosition()));
    });
  } else {
    // 低缩放级别：隐藏单个标记，交给聚类处理
    markersBS.forEach(marker => marker.setVisible(false));
    markersDV.forEach(marker => marker.setVisible(false));
  }
});

5. 优化SVG图标的加载效率 #

虽然你用了优化后的SVG，但外部URL加载会触发额外的HTTP请求，尤其当大量标记初始化时，请求排队会导致延迟。建议把SVG内容转成Data URI嵌入代码中，减少网络请求：

// 示例：将wifi-red.svg转为base64后的Data URI
const svgWifiRed = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzYiIGhlaWdodD0iMzYiIHZpZXdCb3g9IjAgMCAzNiAzNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjM2IiByeD0iOCIgZmlsbD0iI0VCMDAxQiIvPgo8cGF0aCBkPSJNMTggMjguNkM5LjQgMjguNiAyLjQgMjEuNiAyLjQgMTNDMi40IDQuNCA5LjQgMi40IDE4IDQuNEMyNi42IDIuNCAzMy42IDkuNCAzMy42IDEzQzMzLjYgMjEuNiAyNi42IDI4LjYgMTggMjguNloiIGZpbGw9IndoaXRlIi8+CjxwYXRoIGQ9Ik0xOCAyMi40QzIzLjUgMjIuNCAyOCAxOCAyOCAxM0MyOCA4IDIzLjUgMi40IDE4IDIuNEMxMi41IDIuNCA4IDggOCAxM0M4IDE4IDEyLjUgMjIuNCAxOCAyMi40WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+';
const svgWifiGreen = 'data:image/svg+xml;base64,PHN2ZyB...'; // 同理转换你的其他SVG

// 然后在创建标记时使用
const iconUrl = isDown ? svgWifiRed : svgWifiGreen;

你可以用在线工具（比如SVGOMG）先压缩SVG，再转成base64，直接嵌入代码，彻底消除SVG的加载延迟。

最后再检查几个细节 #

• 确保你的SVG图标本身是精简的：移除不必要的注释、空标签、冗余属性，用工具压缩SVG。
• 避免在zoom_changed事件中执行任何 heavy 计算，尽量把逻辑放在idle事件中（当地图停止移动/缩放后执行）。
• 如果你使用的是旧版MarkerClusterer，建议升级到最新的@googlemaps/markerclusterer包，官方维护的版本性能更优。

这些优化点结合起来，应该能大幅改善缩放时的流畅度，你可以逐个测试，看哪个点对你的场景提升最明显~

内容来源于stack exchange