单击 Mapbox GL JS 显示经纬度坐标

Question

我正在尝试让我的地图框显示坐标 like this Google Map example，单击时会弹出经纬度坐标。我得到的最接近的是获得一个可拖动的标记，它在地图的左下角显示坐标，如果我尝试使用 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);

我有 css .coordinates 样式，当标记被拖动时，它们会显示在屏幕的左下方。我知道这是一个简单的问题，但我对 mapbox 和一般编码完全陌生。将不胜感激任何帮助！谢谢！

Answer 1

我想你要找的是 Mapbox Popup

我已经快速起草了fiddle on how to create a popup with the coordinates clicked，这里有相关的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);
  });
});

单击 Mapbox GL JS 显示经纬度坐标

Display Lat Lng Coordinates on click on Mapbox GL JS

javascript

onclick

coordinates

mapbox

mapbox-gl-js