map.addSource('unaza-goes', {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'LineString',
'coordinates': [
[...]
]
}
}
});
map.on('click', 'unaza-goes', (e: any) => {
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
let popupElem = new mapboxgl.Popup()
.setLngLat(e.lngLat)
.setHTML('<p">THIS IS A POPUP</p>')
.addTo(map);
popupElem.setLngLat(e.lngLat).addTo(map);
});
.map{ position: absolute; top: 0; bottom: 0; width: 100%; }
.mapboxgl-popup {
max-width: 400px;
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
body { margin: 0; padding: 0; }
我的 unaza-goes 图层中有一个 onclick 事件,我想显示适当的弹出窗口,我的做法与我在几个示例中看到的方式相同,但弹出窗口似乎扩展了窗口并显示在地图网络下查看,请随时向我询问详细信息,因为这是我第一次使用 Mapbox,我可能会遗漏一些东西,谢谢!
如果我没记错的话,哪些绝对定位元素显示在其他绝对定位元素前面取决于它们在 DOM 中出现的顺序。您可以使用 CSS 属性 z-index 在 CSS 中控制它。