在 MouseOver 事件上调用 Leaflet Mouseout

2022-01-12 00:00:00 leaflet popup jquery javascript css

我有一张传单地图，我在其中动态添加标记.

I have a leaflet map where I'm dynamically adding markers.

当我将鼠标悬停在标记上时以及单击标记时，我想调用它的弹出窗口.

I want to call the popup for a marker when I hover over it in addition to when I click the marker.

我的代码是:

function makeMarker(){
   var Marker = L.marker...
   Marker.on('mouseover', function(){Marker.bindPopup('HI').openPopup();});

   Marker.on('mouseout', function(){Marker.closePopup();});
}

如果我注释掉 mouseout 行，则会出现弹出窗口，但我必须单击 elswhere 将其关闭.问题是当我将鼠标移出时，光标在光标悬停在标记上时有点闪烁，没有任何显示.我认为弹出窗口正在打开但关闭速度非常快，这就是光标闪烁的原因，但我不知道如何解决这个问题

If I comment out the mouseout line, then the popup appears but then I have to click elswhere to close it. The problem is when I put in the mouseout, at that point, the cursor kinda flickers when it hovers over the marker and nothing shows. I think that the popup is openning but then closing really fast which is why the cursor flickers but I don't know how to fix this

推荐答案

弹出窗口实际上是在光标下方加载并从 Marker 中窃取"鼠标，触发 Marker.mouseout() 事件，从而导致弹出窗口关闭并重新触发 Marker.mouseover() 事件...循环继续，这就是您看到闪烁"的原因.

The popup is actually loading underneath the cursor and 'stealing' the mouse from the Marker, triggering the Marker.mouseout() event, which causes the popup to close and re-triggers the Marker.mouseover() event... and the cycle continues which is why you see the 'flicker'.

我已经看到这种情况取决于缩放级别(通常在缩小时).

I have seen this happen depending on the zoom level (usually when zoomed right out).

尝试在弹出选项中添加偏移量以使其不碍事:

Try adding an offset into your popup options to get it out of the way:

function makeMarker(){
   var Marker = L.marker...
   Marker.on('mouseover', function(){Marker.bindPopup('HI', {'offset': L.point(0,-50)}).openPopup();});

   Marker.on('mouseout', function(){Marker.closePopup();});
}

相关文章