uniapp h5 如何获取经纬度

在uniapp开发的H5页面中，如何获取用户当前位置的经纬度信息？需要调用什么API或者插件吗？在iOS和安卓设备上都能正常使用吗？获取到的经纬度精度如何？

2 回复

使用uni.getLocation方法获取经纬度。示例代码：

uni.getLocation({
  type: 'wgs84',
  success: (res) => {
    console.log('经度：' + res.longitude)
    console.log('纬度：' + res.latitude)
  }
})

注意：H5端需https协议，且用户授权定位权限。


在 UniApp 的 H5 环境中，可以通过 HTML5 的 Geolocation API 获取经纬度。以下是实现方法：

  1. 使用 uni.getLocation 方法（推荐，跨端兼容）：

    uni.getLocation({
  type: 'wgs84', // 默认值，返回 GPS 坐标
  success: (res) => {
    console.log('经度：' + res.longitude);
    console.log('纬度：' + res.latitude);
  },
  fail: (err) => {
    console.error('获取位置失败：', err);
    // 可降级处理或提示用户授权
  }
});

  2. 降级方案（如果 uni.getLocation 在部分 H5 环境不支持）： 直接调用浏览器的 Geolocation API：

    if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const longitude = position.coords.longitude;
      const latitude = position.coords.latitude;
      console.log('经度：' + longitude, '纬度：' + latitude);
    },
    (error) => {
      console.error('错误代码：' + error.code, '消息：' + error.message);
    }
  );
} else {
  alert('浏览器不支持地理定位');
}

注意事项：

  • HTTPS 要求：H5 中获取位置需在 HTTPS 环境或 localhost 下使用。
  • 用户授权：首次调用会触发浏览器权限弹窗，需用户允许。
  • 精度控制：type 可设为 wgs84（GPS 坐标）或 gcj02（国测局坐标，适用于高德/腾讯地图）。

如果遇到问题，检查网络权限或提示用户开启位置服务。

回到顶部