如何让Google Maps Advanced Markers在地图画布而非DOM上层渲染？

针对你遇到的Advanced Markers无法画布渲染、大量标记性能劣于Legacy版本的问题，以下是几个可行的优化方向：

• 改用MarkerClusterer 聚合标记
  Advanced Markers本质是DOM元素，数千个DOM节点同时渲染必然带来性能瓶颈。MarkerClusterer可以将视野内邻近的标记合并为集群标记，仅在缩放时展开单个标记，大幅减少DOM节点数量。
  示例代码：

  // 引入MarkerClusterer库（需先加载Google Maps JS API）
  import { MarkerClusterer } from "@googlemaps/markerclusterer";
  
  // 创建地图实例后，初始化集群器
  const clusterer = new MarkerClusterer({ map, markers: yourAdvancedMarkersArray });
  

• 复用Advanced Marker 实例（对象池模式）
  避免频繁创建和销毁Advanced Marker实例，维护一个对象池存放暂时不可见的标记。监听地图视野变化，回收视野外的标记到池内，需要渲染新标记时优先从池内复用，仅在池空时创建新实例，减少DOM操作开销。

• 回退到Legacy Marker 处理静态标记场景
  如果你的场景中标记是静态的、不需要Advanced Markers的自定义DOM交互特性，直接回退到Legacy Marker并开启optimized: true，此时标记会在地图画布上渲染，性能远优于DOM渲染的Advanced Markers。
  示例代码：

  const legacyMarker = new google.maps.Marker({
    position: { lat: 40.7128, lng: -74.0060 },
    map: map,
    optimized: true, // 开启画布渲染
    // 不设置draggable属性
  });
  

• 使用Data Layer 批量渲染标记与折线
  对于数千级别的Markers和Polylines，Google Maps Data Layer支持批量加载和渲染几何数据，所有元素都在画布层面处理，性能比单个Marker/Polyline更优。
  示例代码：

  const dataLayer = map.data;
  // 批量添加标记与折线数据
  dataLayer.addGeoJson({
    type: "FeatureCollection",
    features: yourMarkersAndPolylinesGeoJsonArray
  });
  

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