我正在制作一个vue项目，我想在我的组件中使用传单 . 我得到了 Map 显示，我可以添加标记但是当我尝试添加调用函数来删除标记时我遇到了错误 . 我明白了
未捕获的TypeError：无法在HTMLInputElement.event上面的HTMLInputElement.eispatch（jquery.js：3058）的HTMLInputElement.eval（VM43035 App.vue：118）中读取未定义的属性'removeLayer'（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>
1 回答
正如Itamajas指出的那样，它绑定到DOM元素，而不是你的vue实例 .
我建议：