Я пытаюсь создать свой собственный тип всплывающих окон для моего приложения mapbox. Тем не менее, я пытаюсь разместить всплывающее окно в нижней части экрана вместо того, чтобы наводить курсор на маркер. Я хочу получить информацию из активного всплывающего окна и поместить его в отдельный элемент HTML вне карты. Либо это, либо вручную стилизовать всплывающее окно, чтобы оно постоянно фиксировалось внизу экрана.
Я пытался стилизовать всплывающее окно вручную, чтобы оно фиксировалось в нижней части экрана, однако кажется, что это невозможно, поскольку стили mapbox автоматически перемещают всплывающее окно при каждом изменении местоположения карты.
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.
Любая помощь очень ценится!