如何始终在视图的中心显示弹出窗口?Mapbox

Question

我想要一个总是出现在视图中心的弹出窗口。如果我把地图向右移动一点，比如Boxhill，然后点击按钮，弹出窗口将很难看到。我该怎么解决这个问题？

https://jsfiddle.net/dendi_lee1996/j985mpvz/20/

HTML

<div id="map"></div>
<nav id="button"></nav>

CSS

body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#button {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: 'Arial', sans-serif;
}
#button tab {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
text-align: center;
}
#button tab:last-child {
border: none;
}
#button tab:hover {
background-color: #f8f8f8;
color: #404040;
}
#button tab.active {
background-color: #3887be;
color: #ffffff;
}
#button tab.active:hover {
background: #3074a4;
}

提前谢谢。

Danny

Answer 1

您可以动态设置弹出窗口的位置(请参阅https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup#setlnglat)。类似这样的东西：

if (!popup.isOpen()) {
this.className = '';
popup.setLngLat(map.getCenter());
popup.addTo(map)
} else {
this.className = 'active';
popup.remove();
}