Question

leaflet 和 leaflet draw 的问题 vue leaflet.draw.js?20d6:8 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

2021-12-20

832

javascript vue.js leaflet leaflet-draw

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 Uncaught TypeError: 无法读取未定义的属性（读取“长度”）

第一次与地图交互后，控制台中出现错误，并且无法再绘制形状

UPD：已切换到 mapbox draw

Answer 1

我是这样解决这个问题的。不要使用 Leaflet， 使用 MapBox，MapBox 可以在 Vue 3 中绘制

DKasane

2022-02-19

Answer 2

我使用类似的代码在底图上绘制多边形，在使用 Vue3 和 leaflet 和 leaflet-draw 时也遇到了类似的问题。绘制多边形后，我在控制台中收到一堆错误，可能是由鼠标悬停事件触发的。

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

尚未找到问题的根本原因，但原因可能是 leaflet-draw 不再符合 Leaflet 基础库（只是猜测）。 Github 上的最后一次提交来自 2018 年，并且有一长串的问题和未解决的拉取请求，而 Leaflet 本身也在不断更新。

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

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