Question

我正在制作一个vue项目，我想在我的组件中使用传单。我显示了地图，我可以添加标记，但我也想删除标记。现在我的代码删除了我在地图上放置的最后一个标记，我想在单击删除选项时删除任何标记。

看起来我将最后一个标记的_leaflet_id分配给我点击的任何标记。我无法弄清楚如何解决这个问题。

<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],
  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) {
  this.marker = L.marker(e.latlng, {
    draggable: true
  })
    .addTo(this.map)
    .bindPopup(this.popupContent);

  this.marker.on("popupopen", this.onPopupOpen);
},
onPopupOpen() {
  var map = this.map;
  var marker = this.marker;
  $(".marker-delete-button:visible").click(() => {
    map.removeLayer(marker);
    console.log(marker);
  });
  }
}
};
</script>

Vue Leaflet标记未被删除

0 个答案: