VUE 3 Google Map Circle不会从地图上删除

Question

Vue 3 谷歌地图圆圈没有从地图中删除

我目前正在从 Vue 2 迁移到 Vue 3。

在 Vue 2 中我可以删除圆圈， 但在 Vue 3 中，我遇到了一个问题：圆圈在移除后首先消失。 但当放大和缩小时，它们会重新出现。 我确实使用 .setMap(null) 方法来删​​除圆圈。

我使用圆圈来显示 POI（兴趣点）的地理围栏，并且 该地理围栏的中心还有一个标记，我可以毫无问题地删除该标记。

还有其他人遇到过同样的问题吗？ 人们在其他框架中也会遇到这个问题吗？

如何创建地图圆圈和标记

 public LoadPoiMarkersAgain (
    googleMapLoader: IGoogleMapLoader
  ): HTMLMapMarker[] {
    const markers: HTMLMapMarker[] = []
    for (let i = 0; i < googleMapLoader.mapPoiData.length; i++) {
      const marker = createHTMLMapMarker({
        latlng: new google.maps.LatLng(
          {
            lat: googleMapLoader.mapPoiData[i].latitude,
            lng: googleMapLoader.mapPoiData[i].longitude
          },
          null,
          true
        ),
        map: googleMapLoader.map,
        data: googleMapLoader.mapPoiData[i],
        html: this.CreatePoiMarkerHTML(
          googleMapLoader,
          googleMapLoader.mapPoiData[i]
        )
      })
      const markerCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: googleMapLoader.map,
        center: new google.maps.LatLng(
          {
            lat: googleMapLoader.mapPoiData[i].latitude,
            lng: googleMapLoader.mapPoiData[i].longitude
          },
          null,
          true
        ),
        radius: googleMapLoader.mapPoiData[i].radius
      })
      this.AddClickListenerToPoiMarker(marker, map)
      markers.push(marker)
      markerCircle.set('poiId', googleMapLoader.mapPoiData[i].poiId)
      googleMapLoader.mapCircles.push(markerCircle)
    }
    return markers
  }

如何删除圆圈

public RemoveMapMarkersData (
    googleMapLoader: IGoogleMapLoader
  ): void {
    if (googleMapLoader.mapCircles.length > 0) {
      googleMapLoader.mapCircles.forEach(
        (element: google.maps.Circle) => {
          element.setMap(null)
        }
      )
    googleMapLoader.mapCircles = []
    }
    // Some more code to remove markers
  }

我尝试过的

尝试 1

我尝试使用

element.setVisible(false)

这也不起作用。

尝试 2

我尝试更改圆圈相对于标记被移除的顺序。 这也行不通。

尝试3

我也尝试删除圆圈 之后我立即将它们添加到地图中。 这似乎确实有效。

 public LoadPoiMarkersAgain (
    googleMapLoader: IGoogleMapLoader
  ): HTMLMapMarker[] {
    // previous code
    googleMapLoader.mapCircles.forEach((circle: google.maps.Circle) => {
circle.setMap(null)
    })
    // previous code
}

难道Vue 3， 是否没有正确地将引用传递给我的方法？

软件包

在此处输入链接说明

Google 文档

Google 文档删除圆圈

Google 文档删除标记

额外

我有一个 gif 演示了该问题。

当我拖动地图时，它应该删除圆圈。 但当放大和缩小时，圆圈又出现了。

来

我还创建了两个沙箱 演示问题： （当您将鼠标移出地图时，圆圈将被删除）

Vue 2

Vue 2 + 谷歌地图

Vue 3

Vue 3 + 谷歌地图

Answer 1

我相信我遇到了同样的问题，同时从VUE 2迁移到Vue 3，在setVisible（false）>中，标记被成功地删除，但随后重新出现在缩放下。

看到与代理有关的控制台错误使我相信问题的原因是由于VUE 2和VUE 3和VUE 3的反应性系统的差异（有关VUE 3反应性的有用文章）。

对我来说，修复程序是使用 markraw（） 创建地图时，该地图本质上返回地图对象本身而无需转换为代理。

<script>
    import { markRaw } from 'vue'

    export default {
        methods: {
            initMap () {
                map = markRaw(new google.maps.Map(document.getElementById("map"), {...}))
            }
        }
    }
</script>

Answer 2

遗憾的是我无法以适当的方式解决问题，
但我现在有一个占位符解决方案。

我的占位符解决方案是在删除圆圈和标记时删除地图。删除地图后，我再次渲染/重新初始化地图。

Vue 3 - 删除圆圈时删除地图

如果我可以按预期删除圆圈和标记 谷歌，
然后我将再次发布有关此的更新。