uniapp H5如何使用uni.chooselocation选择地理位置

在uniapp开发H5页面时，调用uni.chooseLocation选择地理位置没有反应，也没有报错信息。请问这个API在H5端是否支持？如果支持的话需要怎么配置才能正常使用？如果不支持，有没有其他替代方案可以实现类似功能？

2 回复

在H5中，uni.chooseLocation 无法直接使用，因为H5环境不支持原生定位。建议改用H5的Geolocation API：

navigator.geolocation.getCurrentPosition((pos) => {
  console.log(pos.coords.latitude, pos.coords.longitude);
});

或集成第三方地图SDK（如高德、百度地图）来实现定位功能。


在 UniApp 的 H5 环境中，uni.chooseLocation 依赖于浏览器的地理位置权限，但H5 平台默认不支持此 API 的直接使用（会返回失败）。你需要通过以下方法实现类似功能：

推荐解决方案：使用地图服务商 API（如高德、百度地图）

  1. 注册并获取密钥：前往高德开放平台（或百度地图）注册账号，创建应用并获取 Web 端 Key。
  2. 在 H5 页面中引入地图 SDK：
    <!-- 高德地图示例 -->
<script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德Key"></script>
  3. 通过 JavaScript 调用地理位置选择：
    // 示例：跳转至高德地图选址页面
function chooseLocation() {
  const key = '你的高德Key'; // 替换为实际 Key
  const url = `https://uri.amap.com/marker?position=116.473168,39.993015&callnative=0&src=yourAppName`;
  window.location.href = url; // 跳转后用户选择位置，返回时解析参数
}

替代方案：使用 HTML5 Geolocation（仅获取当前位置）

uni.getLocation({
  type: 'wgs84',
  success: (res) => {
    console.log('当前位置:', res.latitude, res.longitude);
  },
  fail: (err) => {
    uni.showToast({ title: '获取位置失败', icon: 'none' });
  }
});

注意事项：

  • 跨平台兼容：上述方法仅限 H5，如需多端统一，建议通过条件编译区分平台。
  • 权限处理：H5 需用户手动授权地理位置权限，且需在 HTTPS 环境下使用。
  • 回调处理：使用地图服务商 API 时，需自行处理位置回调数据（例如通过 URL 参数解析）。

扩展建议：

若需完整地址选择界面，可嵌入地图 SDK 的 POI 搜索组件（如高德的 AMap.PlaceSearch），实现更流畅的交互体验。

回到顶部