Problem mit Leaflet und Leaflet Draw: Nicht erfasster TypeError: Eigenschaft (read 'length') von undefiniert in vue-leaflet.draw.js kann nicht gelesen werden? 20d6:8
P粉818561682
P粉818561682 2024-03-26 22:04:24
0
2
351

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

P粉818561682
P粉818561682

Antworte allen(2)
P粉395056196

我使用类似的代码在底图上绘制多边形,并且在将 Vue3 与传单和传单绘制一起使用时遇到类似的问题。绘制多边形后,我在控制台中收到一堆错误,可能是由鼠标悬停事件触发的。

Uncaught TypeError: this._markers is undefined
in leaflet-draw.js:162:18

尚未找到问题的根本原因,但原因可能是 leaflet-draw 不再符合 Leaflet 基础库(只是猜测)。 Github 的最后一次提交是 2018 年,并且有一个很长的列表 问题 并打开 拉取请求,而 Leaflet 本身则不断更新。

将该库与 Vue 结合使用时也可能会出现此问题。

您是否尝试过使用 Vanilla JS 创建上述功能?

P粉211600174

我是这样解决这个问题的。 代替Leaflet,在Vue 3中使用MapBox和MapBox绘制作品

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage