未捕获的类型错误：无法读取未定义的 VueJ 和 Leaflet 的属性“_leaflet_id”答案

【问题标题】：Uncaught TypeError: Cannot read property '_leaflet_id' of undefined VueJs and Leaflet未捕获的类型错误：无法读取未定义的 VueJ 和 Leaflet 的属性“_leaflet_id”
【发布时间】：2018-07-31 05:58:13
【问题描述】：

我正在制作一个 vue 项目，我想在我的组件中使用传单。我得到了显示的地图，我可以添加标记，但是当我尝试删除标记时遇到错误。我明白了

未捕获的类型错误：无法读取未定义的属性“_leaflet_id” 在 n (leaflet.js:5) 在 e.removeLayer (leaflet.js:5) 在 HTMLInputElement.eval (VM119323 App.vue:74) 在 HTMLInputElement.dispatch (jquery.js:3058) 在 HTMLInputElement.eventHandle (jquery.js:2676)

<template>
 <div id="app" class="container-fluid">
  <div class="row">
   <div class="col-md-9">
    <div id="map" class="map" style="height: 781px;"></div>
  </div>
  <div class="col-md-3">

  </div>
</div>
<router-view/>
</div>
</template>

<script>
export default {
 name: "App",
 data() {
return {
  map: null,
  markers: [],
  mapSW: [0, 4096],
  mapNE: [4096, 0],
  tileLayer: null
 };
 },
mounted() {
this.initMap();
this.initLayers();
this.onClick();
this.onPopupOpen();
},
 computed: {
popupContent: function() {
  return "<input type='button' value='Delete' class='marker-delete-button' /> <br> <input type='button' value='Add Event' class='add-event'/>";
 }
},
 methods: {
initMap() {
  this.map = L.map("map").setView([0, 0], 1);
  this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
    maxZoom: 4,
    minZoom: 3,
    continuousWorld: false,
    noWrap: true,
    crs: L.CRS.Simple
  });
  this.tileLayer.addTo(this.map);

  this.map.on("click", this.onClick, this);

  this.map.setMaxBounds(
    L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
  );

},
initLayers() {},
onClick(e) {
  var newMarker = L.marker(e.latlng, {
    draggable: true
  })
    .addTo(this.map)
    .bindPopup(this.popupContent);

  this.markers.push(newMarker);


  newMarker.on("popupopen", this.onPopupOpen, this);
},
onPopupOpen(index) {

  $(".marker-delete-button:visible").click(() => {
    this.map.removeLayer(this.newMarker);


  });
  }
}
};
</script>

【问题讨论】：

标签： javascript vue.js leaflet

【解决方案1】：

newMarker 变量的范围应该属于组件，以便您以后可以将其删除。现在它只存在于onClick 方法中。你可以阅读更多关于变量作用域here。为了解决您的问题，您需要将newMarker 添加到data() 函数中：

// ...
data() {
  return {
    // ...
    tileLayer: null,
    newMarker: null
  };
},
// ...
onClick(e) {
  this.newMarker = L
    .marker(e.latlng, { draggable: true })
    .addTo(this.map)
    .bindPopup(this.popupContent);

  this.markers.push(this.newMarker);

  this.newMarker.on("popupopen", this.onPopupOpen, this);
},

onPopupOpen(index) {
  $(".marker-delete-button:visible").click(() => {
    this.map.removeLayer(this.newMarker);
  });
}

你完整的代码会是这样的：

<template>
  <div id="app" class="container-fluid">
    <div class="row">
      <div class="col-md-9">
        <div id="map" class="map" style="height: 781px;"></div>
      </div>
      <div class="col-md-3">

      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "App",

  data() {
    return {
      map: null,
      markers: [],
      mapSW: [0, 4096],
      mapNE: [4096, 0],
      tileLayer: null,
      newMarker: null
    };
  },

  mounted() {
    this.initMap();
    this.initLayers();
    this.onClick();
    this.onPopupOpen();
  },

  computed: {
    popupContent: function() {
      return "<input type='button' value='Delete' class='marker-delete-button' /> <br> <input type='button' value='Add Event' class='add-event'/>";
    }
  },

  methods: {
    initMap() {
      this.map = L.map("map").setView([0, 0], 1);
      this.tileLayer = L.tileLayer("/static/map/{z}/{x}/{y}.png", {
        maxZoom: 4,
        minZoom: 3,
        continuousWorld: false,
        noWrap: true,
        crs: L.CRS.Simple
      });
      this.tileLayer.addTo(this.map);

      this.map.on("click", this.onClick, this);

      this.map.setMaxBounds(
        L.LatLngBounds(L.latLng(this.mapSW), L.latLng(this.mapNW))
      );
    },

    initLayers() {},

    onClick(e) {
      this.newMarker = L
        .marker(e.latlng, { draggable: true })
        .addTo(this.map)
        .bindPopup(this.popupContent);

      this.markers.push(this.newMarker);

      this.newMarker.on("popupopen", this.onPopupOpen, this);
    },

    onPopupOpen(index) {
      $(".marker-delete-button:visible").click(() => {
        this.map.removeLayer(this.newMarker);
      });
    }
  }
};
</script>

【讨论】：

【解决方案2】：

您还可以使用 hasLayer 方法验证标记是否真的在地图上，然后再将其移除，如下所示：

if (this.map.hasLayer(this.newMarker)) this.map.removeLayer(this.newMarker);

【讨论】：