如何通过Mapbox GL JS获取地图当前中心坐标（同Mapbox Studio方式）

嘿，刚好做过类似需求，要实现和Mapbox Studio完全一致的地图中心坐标获取方法其实很简单，核心是对齐坐标系和精度——Mapbox Studio用的是标准WGS84经纬度坐标系，Mapbox GL JS默认也是这套体系，直接用内置方法就能搞定：

基础获取方式 #

当你已经初始化好Mapbox GL JS地图实例后，直接调用map.getCenter()就能拿到当前地图的中心坐标，它会返回一个LngLat对象，包含经度（lng）和纬度（lat）两个属性：

// 假设你的地图实例变量名为map
const center = map.getCenter();
// 提取经纬度（保留6位小数，和Mapbox Studio显示精度一致）
const longitude = center.lng.toFixed(6);
const latitude = center.lat.toFixed(6);

// 输出格式和Studio里的展示完全匹配
console.log(`当前中心坐标：纬度 ${latitude}，经度 ${longitude}`);

注：toFixed(6)是为了对齐Mapbox Studio默认的坐标精度，你可以根据需求调整小数位数。

实时监听坐标变化 #

如果要像Studio那样，用户拖动地图后实时更新中心坐标，可以监听地图的moveend事件：

// 地图移动结束后更新坐标
map.on('moveend', () => {
  const center = map.getCenter();
  const lat = center.lat.toFixed(6);
  const lng = center.lng.toFixed(6);
  // 把坐标更新到页面展示元素里，比如一个div
  document.getElementById('center-coords').textContent = `(${lat}, ${lng})`;
});

小提醒 #

• Mapbox GL JS的LngLat对象默认是经度在前、纬度在后存储，但Mapbox Studio界面可能会以“纬度, 经度”的顺序展示，你可以根据需要调整输出顺序。
• 一定要等地图初始化完成再调用getCenter()，比如放在load事件里避免报错：

  map.on('load', () => {
    const initialCenter = map.getCenter();
    console.log('初始地图中心：', initialCenter);
  });
  

内容的提问来源于stack exchange，提问作者MalloryMan