單擊 Mapbox GL JS 顯示經緯度坐標

Question

我正在嘗試讓我的地圖框顯示像這樣的 Google Map 示例坐標，單擊時會彈出經緯度坐標。 我得到的最接近的是一個可拖動的標記，它顯示 map 左下角的坐標，如果我嘗試 onclick function，map 就會變成空白。 我怎樣才能讓坐標在點擊時顯示為彈出窗口？

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 styles for.coordinates，當標記被拖動時，它們會顯示在屏幕的左下方。 我知道這是一個簡單的問題，但我對 mapbox 和一般編碼完全陌生。 將不勝感激任何幫助！ 謝謝！

Answer 1

我認為您正在尋找的是 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);
  });
});