leaflet地图标注在缩放时位置偏移报错与leaflet.draw中文本地化配置
版本leaflet: ^1.9.4,leaflet-draw: ^1.0.2,问题1.leaflet的Marker / Popup / Tooltip移除并再次添加后出现如下报错地图缩放时位置产生偏移。Uncaught TypeError: Cannot read properties of null (reading _latLngToNewLayerPoint)2. Leaflet.draw 绘制时将提示信息改为中文解决方案1.覆盖原来的 _animateZoom 方法2.覆盖leaflet-draw默认的英文提示完整代码function configureDraw() { // 检查 Leaflet 是否已加载 if (typeof L undefined || !L.Tooltip || !L.Tooltip.prototype) { console.warn(Leaflet Tooltip 未加载跳过 tooltip 缩放修复) return } // 保存原始方法如果存在 const originalUpdatePosition L.Tooltip.prototype._updatePosition 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)) } L.Marker.prototype._animateZoom function (e) { if (!this._map) { return } var pos this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center).round() this._setPos(pos) } L.Tooltip.prototype._animateZoom function (e) { if (!this._map) { return } var pos this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center) this._setPosition(pos) } // 覆盖 _updatePosition 方法 L.Tooltip.prototype._updatePosition function () { if (!this._map) { return } try { let pos this._map.latLngToLayerPoint(this._latlng) this._setPosition(pos) } catch (error) { console.warn(Tooltip _updatePosition 出错:, error) // 如果出错尝试调用原始方法 if (originalUpdatePosition) { originalUpdatePosition.call(this) } } } if (!L.drawLocal) { console.warn(L.drawLocal 不可用跳过本地化设置) return } // 设置绘制工具中文 L.drawLocal.draw { toolbar: { actions: { title: 取消绘图, text: 取消, }, finish: { title: 完成绘图, text: 完成, }, undo: { title: 删除最后绘制的点, text: 删除最后的点, }, buttons: { polyline: 绘制线, polygon: 绘制多边形, rectangle: 绘制矩形, circle: 绘制圆形, marker: 绘制标记, circlemarker: 绘制圆形标记, }, }, handlers: { circle: { tooltip: { start: 单击并拖动以绘制圆 }, radius: 半径 }, simpleshape: { tooltip: { end: 释放鼠标完成绘图 } }, rectangle: { tooltip: { start: 单击并拖动以绘制矩形 } }, polyline: { tooltip: { start: 单击开始绘制线, cont: 单击以继续绘制线, end: 单击最后一点以结束线, }, error: strong错误:/strong 形状边缘不能交叉!, }, polygon: { tooltip: { start: 单击开始绘制形状, cont: 单击继续绘制形状, end: 点击第一个顶点完成绘制, }, error: strong错误:/strong 形状边缘不能交叉!, }, marker: { tooltip: { start: 单击地图以放置标记 } }, circlemarker: { tooltip: { start: 单击地图以放置圆标记 } }, }, } // 添加edit节本地化 L.drawLocal.edit { toolbar: { actions: { save: { title: 保存更改, text: 保存 }, cancel: { title: 取消编辑放弃所有更改, text: 取消 }, clearAll: { title: 清除所有图层, text: 清除所有 }, }, buttons: { edit: 编辑图层, editDisabled: 无图层可编辑, remove: 删除图层, removeDisabled: 无图层可删除, }, }, handlers: { edit: { tooltip: { text: 拖动控制点或标记来编辑, subtext: 点击取消撤销更改, }, }, remove: { tooltip: { text: 点击要删除的要素, }, }, }, } } configureDraw()在leaflet和leaflet-draw之后引入即可import L from leaflet import leaflet-draw import leaflet-draw/dist/leaflet.draw.css import ./drawer.js