Leaflet和Leaflet Draw的問題：未捕獲類型錯誤：無法讀取vue-leaflet.draw.js中未定義的屬性（讀取“長度”）？ 20d6：8

Question

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 未擷取類型錯誤：無法讀取未定義的屬性（讀取「長度」）

第一次與地圖互動後，控制台中出現錯誤，並且無法再繪製形狀

UPD：切換到mapbox繪製

Answer 1

我使用類似的程式碼在底圖上繪製多邊形，並且在將 Vue3 與傳單和傳單繪製一起使用時遇到類似的問題。繪製多邊形後，我在控制台中收到一堆錯誤，可能是由滑鼠懸停事件觸發的。

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

尚未找到問題的根本原因，但原因可能是 leaflet-draw 不再符合 Leaflet 基礎函式庫（只是猜測）。 Github 的最後一次提交是 2018 年，並且有一個很長的列表 問題 並打開 拉取請求，而 Leaflet 本身則不斷更新。

將該程式庫與 Vue 結合使用時也可能會出現此問題。

您是否嘗試過使用 Vanilla JS 創建上述功能？

Answer 2

我是這樣解決這個問題的。 取代Leaflet，在Vue 3中使用MapBox和MapBox繪製作品