Mapbox Web端点击定位按钮后如何获取用户当前经纬度？

代码失效的核心原因 #

当前逻辑存在两个关键错误，完全无法实现预期的取点效果：

• 错给GeolocateControl绑定了组件根本不暴露的click事件：你写的回调逻辑实际是照搬地图点击事件的处理方式，e.lngLat是地图点击事件的参数结构，和定位控件的返回值完全不匹配，代码运行时实际读到的都是undefined
• 没有监听定位控件真正对外提供的、能携带定位坐标的事件，自然拿不到用户的实际位置

修复方案 #

1. 替换错误的事件监听逻辑
   Mapbox定位控件专门提供了geolocate事件，只要控件成功获取到用户定位就会触发，回调参数是浏览器原生定位接口返回的标准Position对象，里面的coords.latitude、coords.longitude就是真实的用户经纬度。
   把原来绑定在geolocate上的click事件监听全部替换为geolocate事件监听，从正确的参数路径读取坐标值。
2. 满足功能可用的前置环境要求
   • 需要特别注意：浏览器的定位权限仅允许在HTTPS站点、或者本地localhost开发环境下调用，普通HTTP协议的公网站点会被浏览器直接拦截定位请求，表现为点击定位按钮毫无反应
   • 因为你配置了trackUserLocation: true，后续用户位置发生偏移时，geolocate事件会持续触发，可自动同步更新页面上展示的实时坐标

修正后的可运行代码示例 #

mapboxgl.accessToken = '<你的Access Token>';
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-96, 37.8],
  zoom: 3
});

// 初始化定位控件
const geolocate = new mapboxgl.GeolocateControl({
  positionOptions: {
    enableHighAccuracy: true
  },
  trackUserLocation: true,
  showUserHeading: true
});
map.addControl(geolocate);

// 正确监听定位成功事件
geolocate.on('geolocate', (e) => {
  // 从标准定位返回对象中读取经纬度
  const latitude = e.coords.latitude;
  const longitude = e.coords.longitude;
  
  alert("已获取用户定位");
  $("#latitude").text(latitude);
  $("#longitude").text(longitude);
  console.log('Latitude: ' + latitude + '\nLongitude: ' + longitude);
});

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