Leaflet中实现点击删除已创建标记(marker)的方法咨询

实现方案 #

不需要额外获取标记ID就能完成点击删除需求，直接在创建标记时为每个标记实例绑定点击事件即可，修改后的代码如下：

map.on('click', function(e){
    var marker = new L.marker(e.latlng).addTo(map);
    markers.addLayer(marker)
    marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup()
    // 新增点击删除逻辑
    marker.on('click', function() {
        // 若用markers图层组统一管理标记，直接从图层组移除即可自动同步到地图
        markers.removeLayer(marker);
        // 没有使用图层组的话替换为下面的代码即可
        // map.removeLayer(marker);
    })
});

上述方案利用JS闭包特性，每个标记的点击回调会直接捕获到当前创建的marker实例，不需要额外维护ID映射关系，实现更简洁。

如果你确实需要通过ID调用方法删除标记（比如需要在其他业务逻辑里远程触发删除指定标记），可以参考下面的实现：

// 全局标记ID计数器
let markerIdCount = 0;

map.on('click', function(e){
    var marker = new L.marker(e.latlng).addTo(map);
    // 为标记自定义ID属性
    marker.customId = markerIdCount++;
    markers.addLayer(marker)
    marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup()
});

// 按ID删除标记的方法
function deleteMarkerById(targetId) {
    markers.eachLayer(function(layer) {
        if(layer.customId === targetId) {
            markers.removeLayer(layer);
        }
    })
}

内容的提问来源于stack exchange，提问作者Pi-R