悬停时显示OSM地图标记但移出无法删除标记的问题咨询

问题原因 #

你的代码存在两处核心缺失，导致标记无法正常移除：

• 没有提前初始化 Leaflet 图层组（LayerGroup）实例markers，mkroff中的markers.clearLayers()没有实际的操作对象
• 新增标记时直接添加到了地图实例map上，没有加入到统一管理的图层组中，图层组的清空操作自然不会作用到已生成的标记上

修正代码 #

基础方案（每次悬停仅保留当前链接的标记，移出后全部清空）

首先在全局作用域初始化图层组：

// 提前初始化管理标记的图层组，添加到地图中
const markers = L.layerGroup().addTo(map);

function mkron(x) {
   // 保留原有经纬度获取逻辑
   // 先清空之前的标记，保证仅显示当前悬停链接对应的标记
   markers.clearLayers();
   // 新标记添加到图层组而非直接加到map
   L.marker([lat, lon]).addTo(markers);
}

function mkroff() {
    // 移出悬停时清空所有标记
    markers.clearLayers();
}

原有HTML代码无需修改。

可选方案（允许多个标记共存，仅删除当前移出悬停的链接对应的标记）

如果你的需求是悬停过的链接标记都保留，仅移出某一个链接时删除它对应的标记，修改如下：
JS代码：

const markers = L.layerGroup().addTo(map);

function mkron(x) {
   // 保留原有经纬度获取逻辑
   const newMarker = L.marker([lat, lon]).addTo(markers);
   // 将标记的唯一ID绑定到当前触发事件的链接元素上
   x.dataset.markerId = L.stamp(newMarker);
}

function mkroff(x) {
    // 找到当前链接对应的标记，单独移除
    const targetMarker = markers.getLayer(Number(x.dataset.markerId));
    if (targetMarker) {
        markers.removeLayer(targetMarker);
    }
}

修改HTML代码，将当前元素传入mkroff方法：

<a href="/..." onmouseover="mkron(this)" onmouseout="mkroff(this)">...</a>

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