悬停时显示地图标记

Question

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

HTML

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

JS

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

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

我错过了什么？

Answer 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;
  }
}

悬停时显示地图标记

Show map markers on hover

javascript

openstreetmap

leaflet