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绘制作品