在 MouseOver 事件上调用 Leaflet Mouseout

Question

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

除了单击标记时，我还想在将鼠标悬停在标记上时调用该标记的弹出窗口。

我的代码是：

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

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

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

Answer 1

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

我已经看到这种情况取决于缩放级别（通常在缩小时）。

尝试在您的弹出选项中添加一个偏移量以摆脱它：

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();});
}

Answer 2

我知道这是一个旧线程，但我刚刚遇到了这个问题，我想我可以分享我的解决方案。 我没有抵消弹出窗口，而是通过设置来防止弹出窗口使用 CSS 窃取鼠标事件：

.my-popup {pointer-events: none;}

并将 my-popup className 分配给弹出窗口：

Marker.on('mouseover', function () {Marker.bindPopup('HI', {className: 'my-popup'}).openPopup();})

我希望这对某人有所帮助:)

Answer 3

我最近也再次遇到了这个问题。 如果这对任何人有帮助：从 Leaflet 1.0 开始，您可以使用 L.Tooltip 而不是带有鼠标悬停或其他鼠标相关事件的弹出窗口。 我发现它比制作 Popup 更流畅，并且使用的代码更少，特别是如果您只是在悬停时打开弹出窗口。 在您的情况下，它可能看起来像：

function makeMarker(){
  var Marker = L.marker...
  Marker.bindTooltip('HI').openPopup();
}

如果您想让它保持打开状态，您可以使用permanent布尔标志。

在我的情况下，我不需要在点击时打开弹出窗口（除了悬停），所以这可能会更复杂一些。 然而，L.Tooltip 已变得非常广泛使用，还有其他 SO 问题可以解决这个问题。