2013-11-20 5 views
9

У меня есть карта листовки, где я динамически добавляю маркеры.Листовка Mouseout вызвала событие MouseOver

Я хочу вызвать всплывающее окно для маркера, когда я навис над ним в дополнение к тому, когда я нажимаю маркер.

Мой код:

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

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

Если я закомментируйте MouseOut линию, то появляется всплывающее окно, но тогда я должен нажать elswhere, чтобы закрыть его. Проблема заключается в том, что когда я вставляю курсор мыши, в этот момент курсор вроде бы мерцает, когда он нависает над маркером, и ничего не отображается. Я думаю, что всплывающее окно открывается, но затем закрывается очень быстро, поэтому курсор мерцает, но я не знаю, как это исправить.

+0

Похоже, что у вас есть поведение, которое вы хотите, комментируя событие mouseout. Что за вопрос? – Daniel

+0

Извините, я записал смесь мысли, когда сказал, что работает нормально. Я хотел сказать, что при наведении всплывающее окно отображается нормально, но затем мне нужно либо закрыть его, либо щелкнуть где-то еще на моей карте, а не удалять мышь из маркера. Вопрос в том, как продолжать показывать всплывающее окно, когда мышь над маркером, и как закрыть его, когда я удаляю мышь из маркера. – fifamaniac04

ответ

12

Всплывающее окно фактически загружается под курсором и «крадет» мышь из маркера, вызывая событие 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();}); 
} 
+0

Это сработало красиво. В случае, если кто-то заинтересован, смещение по умолчанию - (0, 6). http://leafletjs.com/reference.html#popup – austin

3

Я знаю, что это старый нить, но я только что наткнулся на этот вопрос, и я думал, что я могу поделиться своими решение. Вместо того, чтобы компенсировать всплывающее окно, я предотвращения всплывающих окон от кражи события мыши с помощью CSS, установив:

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

и назначение моего-всплывающего окна Classname через всплывающее окно:

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

Я надеюсь, что это помогает кто-то :)

Смежные вопросы