Google Maps绘制多边形后无法清除旧标记及中心标记问题

我正在开发一款基于Google Maps API的应用，支持绘制带顶点标记的多边形。但每次创建新多边形时，之前生成的多边形顶点标记及centerMark仍会保留在地图上。需求是每次绘制新多边形时清除所有旧标记，再添加新顶点标记。

现有代码片段 #

// When a new shape is drawn
drawingManager.addListener('overlaycomplete', (event) => {
  if (currentOverlay) {
    currentOverlay.setMap(null);
    setCurrentOverlay(null);
  }

  if (centerMarker) {
    centerMarker.setMap(null);
    setCenterMarker(null);
  }
  vertexMarkers.forEach((marker) => {
    if (marker) {
      marker.setMap(null);
    }
  });

  // rest of the code...

  if (event.type === window.google.maps.drawing.OverlayType.POLYGON) {
    // rest of the code...
    
    vertices.addListener('insert_at', () => {
      newVertexMarkers.forEach((marker) => {
        marker.setMap(null);
      });
      newVertexMarkers = [];
      
      // rest of the code...
    });

    polygon.addListener('click', (event) => {
      // rest of the code...
    });

    vertices.addListener('insert_at', () => {
      newVertexMarkers.forEach((marker) => {
        marker.setMap(null);
      });
      newVertexMarkers = [];

      // rest of the code...
    });

    setCenterMarker(centerMarker);
  }
});

return () => {
  if (drawingManager) {
    window.google.maps.event.clearInstanceListeners(drawingManager);
    drawingManager.setMap(null);
  }

  if (currentRadiusLine) {
    currentRadiusLine.setMap(null);
  }

  if (currentRadiusLabel) {
    currentRadiusLabel.setMap(null);
  }

  if (centerMarker) {
    centerMarker.setMap(null);
  }

  vertexMarkers.forEach((marker) => {
    if (marker) {
      marker.setMap(null);
    }
  });
};

我尝试在每次绘制新多边形时调用setMap(null)移除旧多边形及其标记，但旧标记与centerMark依旧残留。控制台输出显示marker的map属性已设为null，但标记仍在地图上可见。vertexMarkers和centerMarker是用于追踪标记的状态变量。

问题分析与修复方案 #

1. 状态数组未清空导致旧引用残留

你在遍历vertexMarkers清除标记后，没有重置这个数组，导致下次处理时仍引用旧的标记对象。必须在清除后清空数组：

vertexMarkers.forEach((marker) => {
  if (marker) {
    marker.setMap(null);
  }
});
// 关键：清空数组，避免后续处理旧标记引用
vertexMarkers = [];

如果使用React等框架的状态管理，不要直接修改数组，要用状态更新函数：

setVertexMarkers(prev => {
  prev.forEach(marker => marker.setMap(null));
  return [];
});

2. 重复绑定事件监听器导致异常

代码中重复添加了vertices.addListener('insert_at', ...)，这会导致同一事件被多次触发，可能出现标记清理不彻底的情况。移除重复的监听器，只保留一个即可。

3. 新标记未正确纳入全局追踪

确保生成的新顶点标记和中心标记都被添加到vertexMarkers数组中，这样下次绘制新多边形时才能遍历到所有旧标记并清除。比如在生成顶点标记后：

// 生成新顶点标记后
newVertexMarkers.forEach(marker => vertexMarkers.push(marker));
// 如果是中心标记，也可以加入追踪
vertexMarkers.push(centerMarker);

4. 状态更新的同步性问题

如果使用框架状态（比如setCenterMarker），确保状态更新完成后再处理新标记。比如可以用useEffect监听centerMarker的变化，或者在设置新标记前等待状态重置完成。

修复后的核心代码示例 #

drawingManager.addListener('overlaycomplete', (event) => {
  // 清除旧多边形
  if (currentOverlay) {
    currentOverlay.setMap(null);
    setCurrentOverlay(null);
  }

  // 清除中心标记并重置状态
  if (centerMarker) {
    centerMarker.setMap(null);
    setCenterMarker(null);
  }

  // 清除所有顶点标记并清空追踪数组
  vertexMarkers.forEach((marker) => {
    if (marker) {
      marker.setMap(null);
    }
  });
  vertexMarkers = [];

  if (event.type === window.google.maps.drawing.OverlayType.POLYGON) {
    const polygon = event.overlay;
    const vertices = polygon.getPath();
    
    // 只保留一个insert_at监听器
    vertices.addListener('insert_at', () => {
      // 清除当前临时标记
      newVertexMarkers.forEach((marker) => {
        marker.setMap(null);
      });
      newVertexMarkers = [];

      // 重新生成顶点标记
      vertices.forEach((latLng) => {
        const marker = new window.google.maps.Marker({
          position: latLng,
          map: map,
          // 标记样式配置
        });
        newVertexMarkers.push(marker);
      });
      // 将新标记加入全局追踪数组
      vertexMarkers.push(...newVertexMarkers);
    });

    // 生成并设置中心标记
    const center = polygon.getBounds().getCenter();
    const newCenterMarker = new window.google.maps.Marker({
      position: center,
      map: map,
      // 中心标记样式配置
    });
    setCenterMarker(newCenterMarker);
    // 将中心标记加入追踪数组
    vertexMarkers.push(newCenterMarker);
  }
});

额外验证点 #

• 检查所有标记是否都被正确添加到vertexMarkers数组，没有遗漏；
• 测试时打开浏览器开发者工具的Elements面板，查看地图容器内的标记DOM元素是否被移除，确认不是DOM残留问题；
• 如果使用了自定义标记样式，确保没有因为CSS问题导致标记“看似残留”（比如z-index过高或定位错误）。

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