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'