悬停时显示地图标记

【问题标题】：Show map markers on hover悬停时显示地图标记
【发布时间】：2021-12-13 05:39:15
【问题描述】：

我有一个指向多个位置的链接列表。我想将地图标记添加到我的 OSM 地图并在我悬停时将其删除，同时添加新的我悬停在上面的地图等。我已经能够在悬停时向地图添加标记，但我无法删除他们。

HTML

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

function mkron(x) {
   // some code to get lat lon 
   L.marker([lat, lon]).addTo(map);
}

function mkroff() {
    markers.clearLayers();
}

我错过了什么？

【问题讨论】：

能否提供 clearLayers 代码？

标签： javascript leaflet openstreetmap

【解决方案1】：

您的问题是您将标记直接添加到地图而不是将其添加到LayerGroup / FeatureGroup markers。

我不知道你的其余代码，但它应该是这样的：

var markers = L.featureGroup().addTo(map);

function mkron(x) {
   // some code to get lat lon 
   L.marker([lat, lon]).addTo(markers);
}

function mkroff() {
    markers.clearLayers();
}

另一种变体是将图层存储在全局变量中，然后将其从地图中删除：

var marker;

function mkron(x) {
   // some code to get lat lon 
   marker = L.marker([lat, lon]).addTo(map);
}

function mkroff() {
  if(marker){
    map.removeLayer(marker)
    marker = null;
  }
}

【讨论】：

尝试了第一个建议，效果很好！谢谢。