Leaflet OpenStreetMap单标记更新：点击地图清除旧标记实现方案

嘿，我之前也碰到过一模一样的情况！其实你已经选对了用L.LayerGroup来管理标记的思路，只需要加一行关键代码就能解决重复标记的问题。

你现在的问题是每次点击都往地图上加新标记，但没有清除之前的残留。而你创建的home这个LayerGroup就是用来统一管理这些标记的，Leaflet给它提供了一个clearLayers()方法，专门用来清空组内所有的图层（也就是你的标记）。

直接看修改后的代码片段吧：

initmap(); 
var home = new L.LayerGroup();
// 先把LayerGroup挂载到地图上，后续添加标记会自动显示
home.addTo(map);

map.on('click', function(e) { 
    // 核心：点击时先清除所有旧标记
    home.clearLayers();
    
    // 创建新标记并添加到home组里
    L.marker(e.latlng).addTo(home);
    
    document.getElementById("latFld").value = e.latlng.lat; 
    document.getElementById("lngFld").value = e.latlng.lng;
});

简单解释下逻辑： #

• 先把home这个LayerGroup添加到地图上，这样之后往组里加的标记都会自动在地图上显示
• 每次点击地图时，先调用home.clearLayers()清空组内所有旧标记
• 然后创建新的标记并加入home组，这样地图上就只会显示最新的那一个标记了

如果之后你需要管理多个标记（比如批量添加/删除），用LayerGroup的方式也会比单独管理每个标记方便很多。

内容的提问来源于stack exchange，提问作者Rich_F