我正在尝试为我的mapbox应用程序创建自己的弹出窗口类型。但是,我试图将弹出窗口固定在屏幕底部,而不是将鼠标悬停在标记上。我基本上想从活动的弹出窗口中获取信息,并将其放入地图之外的单独HTML元素中。可以通过这种方式或手动设置弹出窗口的样式,使其始终固定在屏幕底部。
我尝试手动设置弹出窗口的样式,因此将其固定在屏幕底部,但是由于地图框样式会在地图位置更改时自动重新定位弹出窗口,因此这似乎是不可能的。
for(var i = 0; i < currentArray.length ; i++){
var el = document.createElement('div');
var markerHeight = 50, markerRadius = 10, linearOffset = 25;
el.className = 'marker2';
new mapboxgl.Marker(el)
.setLngLat([currentArray[i].lng, currentArray[i].lat])
.addTo(map);
new mapboxgl.Marker(el)
.setLngLat([currentArray[i].lng, currentArray[i].lat])
.setPopup(new mapboxgl.Popup({ offset: 25, closeOnClick:true})
.setHTML('<h3>' + currentArray[i].name
+ '</h3>' + '<p>' + currentArray[i].venue + '</p>'))
.addTo(map);
}
上面的代码循环遍历一系列列表元素,并将它们绘制在地图上。我想找到一种方法来获取处于活动状态的元素(即正在显示的弹出窗口),并从中获取数组信息并放入HTML元素中。 任何帮助深表感谢!
答案 0 :(得分:0)
Popup
(https://docs.mapbox.com/mapbox-gl-js/api/#popup)具有可以测试的.isOpen()
和可以收听的'open'
事件。
答案 1 :(得分:0)
您可能需要使用新的maboxgl.Marker.addTo进行切换。在此处查看详细信息:https://docs.mapbox.com/help/troubleshooting/transition-from-mapbox-js-to-mapbox-gl-js/#add-a-marker