Leaflet/Vue 3 Issue Uncaught TypeError: Cannot read properties of null / this._map is null

Question

每当我尝试在弹出窗口关闭时放大或缩小时，我在 Vue 3 上的 Leaflet 上遇到错误。 Mozilla 上的错误：

Uncaught TypeError: this._map is null Popup.js

和 chrome

上的错误

Uncaught TypeError: Cannot read properties of null (reading '_latLngToNewLayerPoint') Popup.js

除此之外，在某些情况下发生错误时，地图上的标记在放大和缩小时会停止随缩放动画移动。解决方案之一是将 soomAnimation 设置为 false，我不能这样做，我需要 UI 上的动画。在将它与 Leaflet 一起使用之前，我还尝试了一种正确解包/解包代理 this.map 的解决方案，我将脚本中的所有 this.map 实例更改为 toRaw(this.map) 但错误仍然存在。

  L.geoJSON(geoJson, {
    onEachFeature: function (feature, layer) {
      self.onEachFeature(feature, layer);
      layer.on({
        click: self.clickMarker,
      });
    },
  }).addTo(self.markerLayer);

  self.markerLayer.addTo(toRaw(self.map));

我也尝试过更新 Leaflet，但没有任何效果。请帮忙

Answer 1

每当您引用也存储在 Vue3 组件状态中的对象时，您可能需要执行相同的展开过程，例如 self.markerLayer，如果您在 self.onEachFeature 中使用这些对象，则类似和 self.clickMarker 方法。

Leaflet/Vue 3 Issue Uncaught TypeError: Cannot read properties of null / this._map is null

Leaflet/Vue 3 Issue Uncaught TypeError: Cannot read properties of null / this._map is null

javascript

leaflet

vuejs3