uniapp H5中如何使用uni.getLocation获取地理位置

在uniapp开发H5页面时，调用uni.getLocation获取地理位置一直失败，返回错误码"PERMISSION_DENIED"。已经按照文档配置了manifest.json中的定位权限，并在H5真机调试时允许了浏览器定位权限，但依然无法获取坐标。请问还需要检查哪些配置？是否有H5环境下特殊的兼容性处理？

2 回复

在uniapp H5中，使用uni.getLocation获取地理位置：

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

注意：H5端需要https协议，且用户授权地理位置权限。


在 UniApp 的 H5 环境中，使用 uni.getLocation 获取地理位置时，需要注意 H5 平台的特殊性（依赖浏览器权限）。以下是详细步骤和代码示例：

1. 基本使用方法

调用 uni.getLocation API 获取当前位置信息（经纬度等）。H5 平台需要用户授权地理位置权限。

uni.getLocation({
  type: 'wgs84', // 默认为 wgs84，返回 GPS 坐标；可选 gcj02（国测局坐标）
  success: (res) => {
    console.log('经度：' + res.longitude);
    console.log('纬度：' + res.latitude);
    console.log('详细位置信息：', res);
  },
  fail: (err) => {
    console.error('获取位置失败：', err);
    // 常见错误：用户拒绝授权或浏览器不支持
    uni.showToast({ title: '获取位置失败', icon: 'none' });
  }
});

2. 处理权限问题

  • 用户授权：首次调用时会自动弹出浏览器授权提示，用户需点击“允许”。
  • 拒绝处理：如果用户拒绝，可引导用户手动开启浏览器权限（在地址栏左侧或设置中）。

3. 注意事项

  • HTTPS 要求：H5 部署到服务器时需使用 HTTPS，本地开发（localhost）除外。
  • 兼容性：部分旧浏览器可能不支持，建议用 uni.getSystemInfo 检测功能支持情况。
  • 高精度设置：可添加 highAccuracyExpireTime 参数延长高精度定位超时时间（单位 ms）。

4. 完整示例（含错误处理）

export default {
  methods: {
    getLocation() {
      uni.getLocation({
        type: 'wgs84',
        highAccuracyExpireTime: 3000, // 高精度定位超时时间
        success: (res) => {
          uni.showToast({ title: '定位成功' });
          // 可进一步调用逆地理编码接口（如腾讯地图API）获取具体地址
        },
        fail: (err) => {
          let msg = '定位失败';
          if (err.errMsg.includes('denied')) msg = '请授权地理位置权限';
          uni.showModal({ content: msg, showCancel: false });
        }
      });
    }
  },
  onLoad() {
    this.getLocation(); // 页面加载时触发
  }
};

常见问题

  • 授权后仍失败：检查域名是否在安全来源列表中，或尝试清除浏览器缓存。
  • 坐标偏移：若需国内地图显示，建议用 gcj02 类型（高德/腾讯地图兼容）。

通过以上步骤，即可在 UniApp H5 中稳定获取地理位置信息。

回到顶部