我正在尝试让我的地图框显示坐标就像这个 Google 地图示例一样,点击时会弹出 lat lng 坐标。我得到的最接近的是获得一个可拖动标记,它在地图左下角显示坐标,如果我尝试 onclick 函数,地图就会变成空白。我怎样才能让坐标在点击时显示为弹出窗口?
var marker = new mapboxgl.Marker({
draggable: true
})
.setLngLat([101.967, 35.431])
.addTo(map);
function onDragEnd() {
var lngLat = marker.getLngLat();
coordinates.style.display = 'block';
coordinates.innerHTML =
'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
}
marker.on('dragend', onDragEnd);
我有 .coordinates 的 css 样式,当标记被拖动时,它们会显示在屏幕的左下角。 我知道这是一个简单的问题,但我对 Mapbox 和一般编码完全陌生。将不胜感激任何帮助!谢谢!
我想你正在寻找的是一个Mapbox Popup
我已经起草了一个关于如何创建单击坐标的弹出窗口的快速小提琴,这里有相关的js代码:
mapboxgl.accessToken = 'PUT HERE YOUR TOKEN';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-122.486052, 37.830348],
zoom: 14
});
map.on('style.load', function() {
map.on('click', function(e) {
var coordinates = e.lngLat;
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML('you clicked here: <br/>' + coordinates)
.addTo(map);
});
});