时间戳

首页 > 解决方案 > 无法读取未定义的属性“_layerAdd”（vue + 传单）

javascript - 无法读取未定义的属性“_layerAdd”（vue + 传单）

问题描述

尝试将要素组添加到我的地图时出现此错误：

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

标签： javascriptvue.jsleaflet

解决方案

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

要看到这一点，请考虑以下代码LFeatureGroup.vue：

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

注意它是如何调用的：

this.parentContainer.addLayer(this);

这里this指的是 Vue 组件的一个实例l-feature-group，而底层的 LeafletFeatureGroup在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 实例的一种方式。使用refand$refs代替。

推荐阅读