Leaflet地图框架使用,L.Popup,read properties of null (reading ‘_latLngToNewLayerPoint‘)报错问题

/************************解决由于vue3代理导致控制台报错问题********************************/
            L.Popup.prototype._animateZoom = function (e) {
            if (!this._map) {
                return
            }
            var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center),
                anchor = this._getAnchor()
            L.DomUtil.setPosition(this._container, pos.add(anchor))
            }

/************************解决由于vue3代理导致控制台报错问题********************************/
 

Leaflet这个JavaScript库中,Marker图层是用来表示地图上特定位置的标记图标。当你说Marker图层随地图缩放飘动并且报出`Cannot read properties of null (reading '_latLngToNewLayerPoint')`这样的错误,通常是因为你在处理Marker的位置变化或者添加到Map容器时,某个步骤出现了问题。 `_latLngToNewLayerPoint`是一个内部方法,用于将LatLng坐标转换成屏幕上的像素点。如果这个方法返回null,说明它正在尝试访问一个尚未初始化的对象属性。这可能的原因有: 1. **Marker未正确添加到Map**:在设置好 Marker 的位置(`setLatLng` 或 `updatePosition`)并将其添加到 Map (`addTo` 方法) 之前就进行了缩放操作。 2. **引用错误**:检查是否有误删或改变Marker实例的状态,或者在事件回调函数中处理Marker时,Marker实例已被销毁。 3. **错误的动画或交互设置**:某些 Leaflet 动画效果(如 panBy、animate 等)可能导致这个问题,特别是如果你在动画过程中直接访问 Marker 属性。 要解决此问题,你需要先确认 Marker 是否已成功添加到 Map 上,然后在需要的时候执行更新操作。如果是在动画结束后需要正确地更新 Marker 的位置,可以使用 `moveEnd` 或 `animationend` 事件监听器。 ```javascript // 示例修复 var marker = L.marker([51.505, -0.09]).addTo(map); marker.on('moveend', function() { // 在动画结束之后更新位置 if (this._latlng) { this.update(); } }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值