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

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

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

新的mapboxgl.标记（el{
偏移量：[0，-25]
})
.setLngLat（标记、几何、坐标）
.setPopup（新建mapboxgl.Popup（）//添加弹出窗口
.setHTML（“”+marker.properties.title+”'））
.addTo（地图）；

---

这是我的，有人能帮我解决这个问题吗？

mapboxgl.Marker

被实现为简单的HTML

元素。您可以将标准事件侦听器附加到它们，并手动切换弹出窗口：

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

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

见文件：

编辑：防止单击打开弹出窗口

我试着做了一些测试，唯一可靠的工作就是在您自己的单击处理程序中调用

marker.togglePopup（）

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

  marker.togglePopup();
});

完整示例：

答案有效。但是，如果在鼠标悬停在标记上时单击该标记，则弹出窗口将关闭，离开标记后，弹出窗口将再次打开

要防止这种行为，应使用方法

marker.addTo（map）

和

marker.remove（）

这些方法由

marker.togglePopup（）函数内部使用：

下面的工作示例


mapboxgl.accessToken='pk.eyJ1IjoibW9ycGhvY29kZSIsImEiOiJVMnRPS0drIn0.QrB-bpBR5Tgnxa6nc9TqmQ'；
var纪念碑=[-77.0353,38.8895]；
var map=new mapboxgl.map({
容器：“映射”，
风格：'mapbox://styles/mapbox/light-v9',
中心：纪念碑，
缩放：15
});
//创建弹出窗口
var popup=new mapboxgl.popup(
{偏移量：[28，0]}
)塞特克斯先生(
华盛顿纪念碑的建造始于1848年
);
//创建标记
让marker=new mapboxgl.marker（）.setLngLat（纪念碑）；
//获取标记元素
常量元素=marker.getElement（）；
element.id='marker'
//悬停事件侦听器
element.addEventListener（'mouseenter'，（）=>popup.addTo（map））；
element.addEventListener（'mouseleave'，（）=>popup.remove（））；
//向标记添加弹出窗口
marker.setPopup（弹出窗口）；
//将标记添加到地图
marker.addTo（map）
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
#标记{
背景图像：url（'https://www.mapbox.com/mapbox-gl-js/assets/washington-monument.jpg');
背景尺寸：封面；
宽度：50px；
高度：50px；
边界半径：50%；
光标：指针；
}
.mapboxgl弹出窗口{
最大宽度：200px；
}

很有效，谢谢。弹出窗口现在显示在悬停状态，但单击时仍然显示。你能告诉我怎么让它们只停留在悬停状态吗？这是JSFIDLE的补充：我编辑了我的答案，以包括防止点击的问题：）一直在网上寻找。老兄，你的解决办法是最简单最好的。你救了我的命。
togglePopup() {
    var popup = this._popup;

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