mounted() { this.initMap(); }, methods: { initMap() { this.map = L.map('mapContainer').setView([48.856663, 2.351556], 12); this.tileLayer = L.tileLayer( "https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}", { attribution: '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery (c) <a href="https://www.mapbox.com/">Mapbox</a>', maxZoom: 18, id: "mapbox/satellite-streets-v11", accessToken: "token", } ); this.tileLayer.addTo(this.map); var drawnItems = new L.FeatureGroup(); this.map.addLayer(drawnItems); var drawControl = new L.Control.Draw({ edit: { featureGroup: drawnItems } }); this.map.addControl(drawControl); this.map.on(L.Draw.Event.CREATED, function(event){ let layer = event.layer; console.log(`start ${layer}`); drawnItems.addLayer((layer)) }) }, }, }
leaflet.draw.js?20d6:8 Nicht erfasster TypeError: Eigenschaft von undefiniert kann nicht gelesen werden (lesen Sie „Länge“)
Nach der ersten Interaktion mit der Karte erscheint ein Fehler in der Konsole und die Form kann nicht mehr gezeichnet werden
UPD: Wechseln Sie zur Mapbox-Zeichnung
我使用类似的代码在底图上绘制多边形,并且在将 Vue3 与传单和传单绘制一起使用时遇到类似的问题。绘制多边形后,我在控制台中收到一堆错误,可能是由鼠标悬停事件触发的。
尚未找到问题的根本原因,但原因可能是 leaflet-draw 不再符合 Leaflet 基础库(只是猜测)。 Github 的最后一次提交是 2018 年,并且有一个很长的列表 问题 并打开 拉取请求,而 Leaflet 本身则不断更新。
将该库与 Vue 结合使用时也可能会出现此问题。
您是否尝试过使用 Vanilla JS 创建上述功能?
我是这样解决这个问题的。 代替Leaflet,在Vue 3中使用MapBox和MapBox绘制作品