使用 Mapbox gl js 在悬停时添加弹出窗口到自定义标记

Question

我正在采用这个例子，但我需要弹出窗口出现在悬停而不是点击。以下是现在添加弹出窗口的方式：

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，谁能帮我解决这个问题？

Answer 1

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/

Answer 2

可怕的答案正在发挥作用。但是，如果您将鼠标悬停在标记上时单击该标记，弹出窗口将关闭，并且在离开标记时，弹出窗口将再次打开。

为了防止这种行为，您应该使用方法marker.addTo(map)和marker.remove()这些方法由函数内部使用marker.togglePopup()：标记源

togglePopup() {
    var popup = this._popup;

    if (!popup) return;
    else if (popup.isOpen()) popup.remove();
    else popup.addTo(this._map);
}

下面的工作示例

togglePopup() {
    var popup = this._popup;

    if (!popup) return;
    else if (popup.isOpen()) popup.remove();
    else popup.addTo(this._map);
}

mapboxgl.accessToken = 'pk.eyJ1IjoibW9ycGhvY29kZSIsImEiOiJVMnRPS0drIn0.QrB-bpBR5Tgnxa6nc9TqmQ';

var monument = [-77.0353, 38.8895];
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: monument,
    zoom: 15
});

// create the popup
var popup = new mapboxgl.Popup(
	{offset:[28, 0]}
).setText(
	'Construction on the Washington Monument began in 1848.'
);
// create the marker
let marker = new mapboxgl.Marker().setLngLat(monument);

// get the marker element
const element = marker.getElement();
element.id = 'marker'
// hover event listener
element.addEventListener('mouseenter', () => popup.addTo(map));
element.addEventListener('mouseleave', () => popup.remove());

// add popup to marker
marker.setPopup(popup);
// add marker to map
marker.addTo(map);

#map { position:absolute; top:0; bottom:0; width:100%; }
#marker {
    background-image: url('https://www.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
    background-size: cover;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
}

.mapboxgl-popup {
    max-width: 200px;
}