同一位置的标记不能与 Vue3 + Leaflet Markercluster 一起正常工作

Question

问题是 vue3 应用程序中的传单地图加载完美，看起来很棒。此外，当您单击具有相同位置的两个图标的位置时，它们会完美打开，但当您再次单击相同位置时，图标消失并且“蜘蛛”仍然可见（见图）。 spider remains

Vue3 App中的方法有：

methods:{
  setupMarkers(){
    this.markers.clearLayers();
    this.cursesData.forEach(cursa =>this.ficaMarkers(cursa));
    this.map.addLayer(this.markers);
  },
  setupLeafletMap(){
    this.map=L.map("mapContainer").setView(this.center,6);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
      attribution:'OpenStreetMap',
    }).addTo(this.map);
    this.markers= L.markerClusterGroup({
      //spiderfyOnMaxZoom: true,
      });
    
  },
  ficaMarkers(cursa){
    this.markers.addLayer(L.marker([cursa.coordenades[0],cursa.coordenades[1]],{title:cursa.nom})
    .bindPopup(cursa.distancies)
    )
  },
},

如果有人能帮助我，我将不胜感激。谢谢

Answer 1

这是一个与类似的问题：

What seems to be the culprit is the proxying of this.map by Vue, which seems to interfere with Leaflet events (un)binding. It looks like Vue 3 now automatically performs deep proxying, whereas Vue 2 was shallow.

在您的情况下，this.markers（即 Leaflet MarkerClusterGroup）也会发生同样的事情。

一个解决方案是在您使用地图和 mcg 时“展开”/un-proxying，例如使用 Vue3 的 toRaw:

toRaw(this.map).addLayer(toRaw(this.markers));

然后我们恢复正常的 MCG 行为，即如果您在群集已经被蜘蛛化时单击它，什么也不会发生（而最初标记正在坍塌，但蜘蛛腿会无限期地保留）

修复了 CodeSandbox：https://codesandbox.io/s/markers-hide-spiders-stay-forked-l2ruqh?file=/src/App.vue

同一位置的标记不能与 Vue3 + Leaflet Markercluster 一起正常工作

Markers in the same position don't work properly with Vue3 + Leaflet Markercluster

leaflet

leaflet.markercluster

vuejs3