如何通过按钮清除Google Maps API中的绘图内容（无需刷新页面）

很高兴你已经搞定了自定义控件的集成！其实要实现点击按钮清除绘图内容，核心是找到DrawingManager管理的所有绘制图形，然后逐个从地图上移除就行，我给你两种靠谱的实现方式：

方法一：直接利用DrawingManager的内置方法 #

如果你的Google Maps API版本比较新，DrawingManager提供了getOverlays()和setOverlays()方法来管理绘制的图形，直接用这个最省心：

首先确保你已经初始化了DrawingManager实例：

// 初始化绘图管理器
const drawingManager = new google.maps.drawing.DrawingManager({
  drawingControl: true,
  drawingControlOptions: {
    position: google.maps.ControlPosition.TOP_RIGHT,
    drawingModes: [
      google.maps.drawing.OverlayType.POLYGON,
      google.maps.drawing.OverlayType.POLYLINE,
      google.maps.drawing.OverlayType.MARKER
    ]
  }
});
drawingManager.setMap(map); // map是你的地图实例

然后在自定义控件的点击事件里添加清除逻辑：

// 给你的清除按钮绑定点击事件
controlUI.addEventListener('click', function() {
  // 获取所有通过绘图工具创建的覆盖物
  const allDrawnOverlays = drawingManager.getOverlays();
  
  // 逐个从地图上移除
  allDrawnOverlays.forEach(overlay => {
    overlay.setMap(null);
  });
  
  // 清空DrawingManager内部的覆盖物列表（可选，但建议加上）
  drawingManager.setOverlays([]);
});

这个方法的好处是不用额外维护变量，DrawingManager已经帮你管理了所有绘制的图形，清除起来一步到位，而且只会清除绘图工具创建的内容，不会影响地图上其他自定义添加的覆盖物。

方法二：手动维护绘制图形数组（兼容旧版本API） #

如果你的API版本不支持getOverlays()方法，或者你需要更精细的控制，可以在绘图完成时手动记录所有绘制的图形：

// 创建一个数组来存储所有绘制的图形
const drawnOverlays = [];

// 监听绘图完成事件，把新绘制的图形存入数组
drawingManager.addListener('overlaycomplete', function(event) {
  drawnOverlays.push(event.overlay);
  // 可选：绘制完成后自动关闭绘图模式
  drawingManager.setDrawingMode(null);
});

// 清除按钮的点击事件
controlUI.addEventListener('click', function() {
  // 移除所有绘制的图形
  drawnOverlays.forEach(overlay => {
    overlay.setMap(null);
  });
  
  // 清空数组，避免下次重复清除
  drawnOverlays.length = 0;
});

这种方式兼容性更好，而且你还可以在数组里做一些额外操作，比如单独删除某一个图形，而不是全部清除。

两种方法都能实现无刷新清除地图绘图内容，根据你的API版本和需求选就行啦！

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