javascript - 未捕获的类型错误 : Cannot read property 'removeLayer' of undefined Vue and Leaflet

Question

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

Uncaught TypeError: Cannot read property 'removeLayer' of undefined at HTMLInputElement.eval (VM43035 App.vue:118) at HTMLInputElement.dispatch (jquery.js:3058) at 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,
  marker: null,
  mapSW: [0, 4096],
  mapNE: [4096, 0]
 },
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='marker-delete-button'/>";
}
 },
 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.marker = L.marker(e.latlng, {
    draggable: true
  })
    .addTo(this.map)
    .bindPopup(this.popupContent);
  this.marker.on("click", this.onPopupOpen, this);
},
onPopupOpen() {
  $(".marker-delete-button:visible").click(function() {
    this.map.removeLayer(this.marker);
  });
  }
}
};

</script>

Answer 1

正如 Itamajas 所指出的，这是绑定(bind)到 DOM 元素，而不是您的 vue 实例。

我建议:

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