問題描述

我有一張傳單地圖，我在其中動態添加標記.

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

這篇關于在 MouseOver 事件上調用 Leaflet Mouseout的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！