Question

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

未捕获的TypeError：无法读取属性＆＃39; removeLayer＆＃39;未定义的在HTMLInputElement.eval（VM43035 App.vue：118）在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,
  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指出的那样，它与DOM元素绑定，而不是你的vue实例。

我建议：

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

未捕获的TypeError：无法读取属性＆＃39; removeLayer＆＃39;未定义的Vue和Leaflet

1 个答案: