2 
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: Cannot read properties of undefined (reading 'length')

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

UPD：切换到地图框绘制

在此处输入图像描述

4

2 回答 2

1

我这样解决了这个问题。在 Vue 3 中使用 MapBox 和 MapBox 绘制作品而不是 Leaflet

于 2022-02-19T21:00:45.797 回答
0

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

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

尚未找到问题的根本原因，但原因可能是leaflet-draw 不再符合Leaflet Base Library（只是猜测）。Github的最后一次提交是从 2018 年开始，有很长的问题列表和开放的拉取请求，而 Leaflet 本身也在不断更新。

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

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

于 2021-12-23T18:38:31.043 回答