Question

Leaflet/Vue 3 问题未捕获的 TypeError：无法读取 null / this._map 的属性为 null

2022-04-25

4220

javascript leaflet vuejs3

每当我尝试在弹出窗口关闭时放大或缩小时，我在 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 上的动画。我还尝试了一种解决方案，在将 this.map 与 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

我们也遇到了这个问题，但是我们使用的是带有 refs 的 Composition API。

由于 ref 默认会创建一个深度反应对象，将其用于 Leaflet 根元素或例如标记群集，因此将注册许多侦听器，从而导致性能问题，因此标记会冻结并出现控制台错误（_map 为空）。

我们的解决方案是使用 shallowRef 来跟踪我们需要在应用中跟踪的 Leaflet 对象，并使用普通 JS 变量来跟踪非跟踪对象。

正如 Vue 文档所述：

shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems.

Answer 2

每当您引用也存储在 Vue3 组件状态中的对象（如 self.markerLayer ）时，您可能需要执行相同的解包过程，如果您在 self.onEachFeature 和 self.clickMarker 方法中使用它们，则同样需要执行相同的解包过程。