LeafletJS，如何在绑定弹出窗口中删除带有按钮的标记

Question

我正在使用传单地图制作一个 Web 应用程序，我希望用户能够按照他们的意愿放置和删除标记，但我无法找到一种方法来做到这一点。

标记坐标存储在数据库中，当我加载页面时，我使用坐标（GET 请求）将它们放在地图上。现在我试图找到一种方法，当用户按下位于标记传单 bindPopup 中的按钮时删除标记。

$.ajax({
      //GET REQUEST
    })
    .done(function( data ) {
      for (i=0 ; i < data.length ; i++) { 

        // ......

        var mp = new L.Marker([marker["lat"], marker["lng"]],{draggable:'true'});
        mp.addTo(mymap);
        mp.bindPopup('<button type="button" onclick="">Delete Marker</button>',{maxWidth: "auto"}).openPopup(); //Here i want to add a function that deletes a specific marker 
        markers.addLayer(mp);

我遇到的主要问题是，当我将代码放在按钮的 onclick 部分以删除标记时，它不接受环境变量，因此不接受标记，因此我什至无法在没有 id 的情况下发送 DELETE 请求。

Answer 1

这是一个使用的工作演示 document.createElement('button')

注意： bindPopup 接受 HTMLElement

var mymap = L.map('Lmap').setView([41.349412, 2.151421], 10);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 18,
  fadeAnimation: false,
  zoomAnimation: false,
  markerZoomAnimation: false,
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(mymap);

var mp = new L.Marker([41.349412, 2.151421], {
  draggable: 'true'
});
mp.addTo(mymap);

let btn = document.createElement('button');
btn.innerText = 'Delete Marker';
btn.onclick =  function() {
  mymap.removeLayer(mp);
}

mp.bindPopup(btn, {
  maxWidth: 'auto'
}).openPopup();

#Lmap {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 80%
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<div id="Lmap"></div>