在OSM中使用leaflet.js再次单击时删除引脚/标记？

Question

放置标记的效果很好，但是现在我希望客户设置错误的标记（错误的位置），以便能够单击已放置的标记并将其删除（在确认后）。问题是：是否有办法处理已经放置的标记的单击，将另一个标记粘贴在其上方或附近？

var mymap = L.map('map').setView([42.148271, 24.750240], 17);

$(document).ready(function() {
    $('#map').css('width', $('.vc_custom_1538133669144').width());
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        accessToken: 'not-needed',
    }).addTo(mymap)

    L.marker([42.148271, 24.750240]).addTo(mymap);

    mymap.on('click', onMapClick);
});

function onMapClick(e) {
    $('#map').append('<label>test:</label><input type="hidden" name="map_coords"  id="file"  value="' + e.latlng.lat + '|' + e.latlng.lng + '"/>');
    L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map" style="height: 500px;">

</div>

Answer 1

向标记添加点击侦听器：

var mymap = L.map('map').setView([42.148271, 24.750240], 17);

$(document).ready(function() {
    $('#map').css('width', $('.vc_custom_1538133669144').width());
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        accessToken: 'not-needed',
    }).addTo(mymap)

    L.marker([42.148271, 24.750240]).addTo(mymap);

    mymap.on('click', onMapClick);
});

function onMapClick(e) {
    $('#map').append('<label>test:</label><input type="hidden" name="map_coords"  id="file"  value="' + e.latlng.lat + '|' + e.latlng.lng + '"/>');
    var marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(mymap);
    marker.on('click',function(e) { // new code here
        this.remove();
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map" style="height: 500px;">

</div>