无法读取未定义的属性“_layerAdd”(vue +传单)

Question

在试图将一个功能组添加到我的地图时获取此错误：

TypeError:无法读取未定义的属性“_layerAdd”

抛出错误的代码片段：

<l-map
  id="mapid"
  :zoom="zoom"
  :center="center"
/>


var map = document.getElementById("mapid").__vue__;
    var drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);

使用：

leaflet 1.5.1,
leaflet-draw 1.0.4,
vue 2.6.10,
vue2-leaflet 2.2.1

Answer 1

方法addLayer不是l-map组件的公共API的一部分。即使是这样，传递给addLayer的“层”也需要是Vue2Leaflet包装器组件，而不是底层传单层。

要查看这一点，请考虑LFeatureGroup.vue中的代码

https://github.com/KoRiGaN/Vue2Leaflet/blob/940e17d8a3b19740a448dedf220d0f7ba9c61d31/src/components/LFeatureGroup.vue#L27

注意它是如何调用的：

this.parentContainer.addLayer(this);

这里，this引用Vue组件l-feature-group的一个实例，而底层传单FeatureGroup位于this.mapObject属性中。

我建议您尝试使用l-feature-group组件。类似于：

<l-map
  id="mapid"
  :zoom="zoom"
  :center="center"
>
  <l-feature-group>
    <!-- relevant children -->
  </l-feature-group>
</l-map>

文档中有一个很好的例子：

https://korigan.github.io/Vue2Leaflet/#/components/l-feature-group/

我还强烈建议您避免使用document.getElementById("mapid").__vue__作为获取Vue实例的方法。使用ref和$refs代替。