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，没有正确地将引用传递给我的方法吗？
包装
在此处输入链接描述
谷歌文档
谷歌文档删除圆圈
谷歌文档删除标记
额外
我有一张演示问题的gif图。
当我拖动地图时，它应该会删除圆圈。但当放大和缩小时，圆圈会重新出现。
https://i.gyazo.com/b7310cc4d748da36e026104aff6cb2fe.gif
我还创建了两个沙盒来演示这个问题：(当您将鼠标移出地图时，圆圈将被删除(
Vue 2
Vue 2+谷歌地图
Vue 3
Vue 3+谷歌地图
我相信我在从Vue 2迁移到Vue 3时遇到了同样的问题，在Vue 3中，标记在setVisible(false)时被成功删除，但在缩放时又重新出现。
看到与Proxy相关的控制台错误，我相信问题的原因是Vue 2和Vue 3的反应性系统的差异(关于Vue 3反应性的有用文章(。
对我来说，修复方法是在创建映射时使用markRaw()，它本质上返回映射对象本身，而不转换为代理。
<script>
import { markRaw } from 'vue'
export default {
methods: {
initMap () {
map = markRaw(new google.maps.Map(document.getElementById("map"), {...}))
}
}
}
</script>
很遗憾，我无法以正确的方式解决问题，但我现在有一个占位符解决方案。
我的占位符解决方案是在删除圆圈和标记时删除地图。移除贴图后，我再次渲染/重新初始化贴图。
Vue 3-删除圆圈时删除地图
如果我能按照谷歌的意图删除圆圈和标记，然后我会再次发布更新。