点击 Mapbox GL JS 显示 Lat Lng 坐标

Posted 2023-02-23

【中文标题】点击 Mapbox GL JS 显示 Lat Lng 坐标

【英文标题】：Display Lat Lng Coordinates on click on Mapbox GL JS

【发布时间】：2020-07-29 16:59:06

【问题描述】：

我正在尝试让我的地图框显示坐标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);

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

【参考方案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);
  );
);

【讨论】：

这太棒了！工作就像一个魅力，非常感谢！

很高兴为您提供帮助！如果它解决了您的问题，请将其标记为已接受答案，这样它也将帮助其他有相同问题的用户知道它是正确的解决方案

非常好。以及如何将这些坐标放入输入表单中？比如在Lat输入中，插入纬度值，在Lng输入中，插入地图点击时的经度值？

@MichelXavier 我建议您就该主题提出一个新问题，因为它绝对是一个不同的问题。

@MichelXavier，我刚刚回答了你的问题。