在Google Maps中显示/隐藏AdvancedMarkerElement（含MarkerClusterer场景）

由于AdvancedMarkerElement没有内置的setVisible()方法，你可以通过以下几种方式实现显示/隐藏，同时适配MarkerClusterer组件：

方法1：通过map属性控制（推荐） #

AdvancedMarkerElement的显示状态直接和它绑定的map实例挂钩，将map设为null即可隐藏，重新赋值地图实例就能显示：

• 隐藏标记：

  advancedMarker.map = null;
  

• 显示标记：

  advancedMarker.map = yourMapInstance;
  

如果使用的是官方@googlemaps/markerclusterer库，它会自动监听标记的map属性变化，实时更新聚类结果，无需额外操作。

方法2：操作DOM元素样式 #

AdvancedMarkerElement基于DOM渲染，可直接修改其元素的CSS样式来控制显示：

1. 先获取标记对应的DOM元素：

   const markerDom = advancedMarker.element;
   

2. 隐藏标记（两种方式二选一）：

   // 完全隐藏，不占用空间
   markerDom.style.display = 'none';
   // 隐藏但保留空间
   markerDom.style.visibility = 'hidden';
   

3. 显示标记：

   markerDom.style.display = '';
   // 对应visibility的恢复
   // markerDom.style.visibility = 'visible';
   

⚠️ 注意：这种方式下MarkerClusterer不会自动感知标记的显示状态变化，需要手动调用聚类器的refresh()方法更新：

markerClusterer.refresh();

方法3：封装自定义标记类（适配setVisible接口） #

如果习惯普通Marker的setVisible()调用方式，可以封装一个继承类，把逻辑封装进去：

class VisibleAdvancedMarker extends google.maps.marker.AdvancedMarkerElement {
  constructor(options) {
    super(options);
    // 初始化时保存地图实例
    this._boundMap = options.map;
  }

  setVisible(visible) {
    this.map = visible ? this._boundMap : null;
  }
}

使用示例：

// 创建自定义标记
const marker = new VisibleAdvancedMarker({
  map: yourMapInstance,
  position: { lat: 40.7128, lng: -74.0060 }
});

// 隐藏标记
marker.setVisible(false);
// 显示标记
marker.setVisible(true);

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