Добавление всплывающих окон при наведении курсора на пользовательские маркеры с помощью Mapbox gl js - PullRequest
Новая
       13

Добавление всплывающих окон при наведении курсора на пользовательские маркеры с помощью Mapbox gl js

0 голосов
/ 18 января 2019

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

new mapboxgl.Marker(el, {
  offset: [0, -25]
})
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup()//add popups
    .setHTML('<h3>' + marker.properties.title + '</h3><p><a href="' + marker.properties.link + '" target="_blank">' + marker.properties.description + '</a></p><p><a href="' + marker.properties.link + '" target="_blank"><img src="' + marker.properties.picture + '" title="" /></a></p>'))
.addTo(map);

Это мой jsFiddle , кто-нибудь может мне помочь решить эту проблему?

1 Ответ

0 голосов
/ 18 января 2019

mapboxgl.Marker реализованы как простые элементы HTML <div>. Вы можете прикрепить к ним стандартный прослушиватель событий и вручную включить всплывающее окно: 

const marker = new mapboxgl.Marker({/* options */});
const markerDiv = marker.getElement();

markerDiv.addEventListener('mouseenter', () => marker.togglePopup());
markerDiv.addEventListener('mouseleave', () => marker.togglePopup());

См. Документы: https://docs.mapbox.com/mapbox-gl-js/api/#marker#getelement

РЕДАКТИРОВАТЬ: Предотвращение открытия всплывающего окна при нажатии

Я попытался провести некоторое тестирование, и единственное, что надежно работает, это вызвать marker.togglePopup() в вашем собственном обработчике кликов 

map.on('click', event => {
  const target = event.originalEvent.target;
  const markerWasClicked = markerDiv.contains(target);

  marker.togglePopup();
});

Полный пример: https://jsfiddle.net/am2jwtzg/

...