最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - LeafletVue 3 Issue Uncaught TypeError: Cannot read properties of nullthis._map is null - Stack Overflow

programmeradmin7浏览0评论

I am facing an error on Leaflet on Vue 3 whenever i try to zoom in or out when a popup is closed. The error on Mozilla:

Uncaught TypeError: this._map is null Popup.js

and the error on chrome

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

Other than this, on some instances when the error occurs, the markers on the map stop moving with the zoom animation while zooming in and out. One of the solutions was to set soomAnimation as false which I cannot do with, I need the animations on my UI. I also tried a solution to properly unwrap / unproxy this.map before using it with Leaflet where I changed all the this.map instances in my script to toRaw(this.map) but the error still persists.

  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));

I have tried updating Leaflet too but nothing works. Please Help

I am facing an error on Leaflet on Vue 3 whenever i try to zoom in or out when a popup is closed. The error on Mozilla:

Uncaught TypeError: this._map is null Popup.js

and the error on chrome

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

Other than this, on some instances when the error occurs, the markers on the map stop moving with the zoom animation while zooming in and out. One of the solutions was to set soomAnimation as false which I cannot do with, I need the animations on my UI. I also tried a solution to properly unwrap / unproxy this.map before using it with Leaflet where I changed all the this.map instances in my script to toRaw(this.map) but the error still persists.

  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));

I have tried updating Leaflet too but nothing works. Please Help

Share Improve this question asked Apr 25, 2022 at 10:12 Niranjan ParabNiranjan Parab 431 silver badge4 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

We also ran into this issue, but we were using the position api with refs.

As a ref creates a deep-reactive object by default, using it for the leaflet root element or e.g. a marker cluster, many listeners will be registered, resulting in performance issues and therefore the marker freezes and console errors (_map is null) occur.

Our solution to this was using shallowRef for leaflet objects we needed to track in our app and plain JS variables for non-tracked objects.

As the vue docs state:

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

You probably need to do the same unwrapping process whenever you refer to an object that you also store in your Vue3 ponent state, like self.markerLayer, and similarly if you use those within your self.onEachFeature and self.clickMarker methods.

发布评论

评论列表(0)

  1. 暂无评论