在Mapbox GL JS上点击后显示纬度和经度坐标

Question

在Mapbox GL JS上点击后显示纬度和经度坐标

javascriptonclickcoordinatesmapboxmapbox-gl-js

6

我正在尝试让我的Mapbox显示坐标像这个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 和编程。非常感谢您的帮助！谢谢！

- Bloop

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jscastro · Accepted Answer

我觉得你在寻找的是一个Mapbox的弹出窗口。

我已经草拟了一个关于如何创建一个根据点击坐标弹出窗口的示例代码，以下是相关的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);
  });
});