問題描述

我有一張傳單地圖，我在其中動(dòng)態(tài)添加標(biāo)記.

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

當(dāng)我將鼠標(biāo)懸停在標(biāo)記上時(shí)以及單擊標(biāo)記時(shí)，我想調(diào)用它的彈出窗口.

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 行，則會(huì)出現(xiàn)彈出窗口，但我必須單擊 elswhere 將其關(guān)閉.問題是當(dāng)我將鼠標(biāo)移出時(shí)，光標(biāo)在光標(biāo)懸停在標(biāo)記上時(shí)有點(diǎn)閃爍，沒有任何顯示.我認(rèn)為彈出窗口正在打開但關(guān)閉速度非?？?，這就是光標(biāo)閃爍的原因，但我不知道如何解決這個(gè)問題

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

推薦答案

彈出窗口實(shí)際上是在光標(biāo)下方加載并從 Marker 中竊取"鼠標(biāo)，觸發(fā) Marker.mouseout() 事件，從而導(dǎo)致彈出窗口關(guān)閉并重新觸發(fā) Marker.mouseover() 事件...循環(huán)繼續(xù)，這就是您看到閃爍"的原因.

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'.

我已經(jīng)看到這種情況取決于縮放級(jí)別(通常在縮小時(shí)).

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

嘗試在彈出選項(xiàng)中添加偏移量以使其不礙事:

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

這篇關(guān)于在 MouseOver 事件上調(diào)用 Leaflet Mouseout的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！