谷歌地图上删除的多边形在缩小后重新出现

Question

我有一张可以绘制多边形的地图。当我开始绘制新的多边形时，我想删除以前绘制的多边形。

实际上：我在地图上同时只有一个多边形。代码一开始似乎可以工作。但是，在我在地图上使用滚动后，先前绘制的多边形会重新出现。

我使用 Vue.js，所以问题可能在于我错误地使用了 Vue API 或 google 地图 API。

这是我的代码：

const loader = new Loader({ apiKey: googleApiKey, libraries: ["drawing"] });

let map = ref(null);
const mapDiv = ref(null);
let oldShape = ref(null);

onMounted(async () => {
  await loader.load();

  map.value = new google.maps.Map(mapDiv.value, {
    center: currentPosition.value,
    zoom: 7,
  });

  const drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.POLYGON,
    drawingControl: false,
    polygonOptions: {
      editable: true,
      fillColor: "#ffff00",
    },
  });

  drawingManager.setMap(map.value);

  google.maps.event.addListener(drawingManager, "overlaycomplete", (event) => {
    if (oldShape.value!==null) {
      oldShape.value.setMap(null);
    }
    const shape = event.overlay;
    shape.type = event.type;
    oldShape.value = shape;
  });
});

效果 我绘制第一个多边形。

之后我又画了一张。第一个多边形消失了：很好。 但是，当我缩小之前删除的多边形时，会再次出现。

这不是期望的行为。

Answer 1

这与 Vue 如何为对象创建代理有关。toRaw()如果您在将地图设置为空时使用该函数，则可以解决该问题。我们也遇到了同样的问题。

我不确定您是否必须使用oldShape对象 或来调用它oldShape.value，因为我们使用选项 API。

// from
oldShape.value.setMap(null);
// to
toRaw(oldShape).setMap(null);