如何移除Google Maps的AdvancedMarkerView标记？搜索更新需刷新标记

问题根源 #

旧版Google Maps Marker的setMap(null)方法和你尝试的remove()方法，不适用于新的AdvancedMarkerView组件——它采用了不同的API设计，通过实例的map属性来控制标记是否绑定到地图。

正确解决方案 #

1. 存储标记实例：创建标记时，将所有AdvancedMarkerView实例存入一个数组，方便后续批量操作。
2. 批量清除标记：遍历数组，将每个标记的map属性设为null，即可从地图上移除标记，最后清空数组释放内存。

完整代码示例 #

// 全局存储所有标记实例的数组
let markers = [];

// 创建并添加新标记的函数
function renderMarkers(searchResults) {
  // 先清除旧标记
  clearExistingMarkers();

  searchResults.forEach(item => {
    const content = document.createElement('div');
    content.className = 'marker-title';
    content.textContent = item.title;

    const marker = new google.maps.marker.AdvancedMarkerView({
      map,
      position: item.position,
      content
    });

    // 将新标记存入数组
    markers.push(marker);
  });
}

// 清除所有旧标记的函数
function clearExistingMarkers() {
  // 遍历标记，移除地图绑定
  markers.forEach(marker => {
    marker.map = null;
  });
  // 清空数组，避免内存泄漏
  markers = [];
}

补充说明 #

• 调用marker.map = null后，标记会立即从地图上消失；若无需复用标记实例，清空数组能避免不必要的内存占用。
• 后续搜索结果更新时，直接调用renderMarkers传入新结果即可完成标记的替换。

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