Question

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

当我将鼠标悬停在标记上时，除了单击标记时，我想将弹出窗口称为标记。

我的代码是：

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

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

如果我注释掉鼠标输出行，则会显示弹出窗口，但是我必须单击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来代替带有鼠标悬停或其他与鼠标相关的事件的弹出窗口。我发现它的工作原理比制作弹出窗口要流畅得多，并且使用的代码更少，特别是如果您只是在悬停时打开弹出窗口时。在您的情况下，它可能看起来像：

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

如果要保持打开状态，可以使用permanent布尔标志。

就我而言，我不需要单击即可打开弹出窗口（除了悬停），因此可能会更复杂一些。但是L.Tooltip已被广泛使用，还有其他SO问题可以解决此问题。

Leaflet Mouseout调用了MouseOver事件

3 个答案: