uniapp h5如何打开地图

在uniapp开发的H5页面中，如何调用系统地图实现导航功能？需要兼容微信浏览器和主流移动端浏览器，能否直接使用uni.openLocation接口？如果不行，是否有其他替代方案？求具体实现代码和注意事项。

2 回复

使用uniapp的uni.openLocation或uni.chooseLocation打开地图。前者显示指定位置，后者让用户选择位置。需在manifest.json配置H5地图类型（如高德、百度）。


在 UniApp 中，H5 平台打开地图可以使用以下方法，主要通过调用系统浏览器或内置地图应用实现：

1. 使用 uni.openLocation API

这是官方推荐的方式，但 H5 平台支持有限，可能直接跳转至网页版地图（如高德、百度）。示例代码：

uni.openLocation({
  latitude: 39.904989,  // 目标纬度（如北京）
  longitude: 116.405285, // 目标经度
  name: '北京市',        // 位置名称
  address: '北京市东城区', // 详细地址
  success: () => {
    console.log('打开地图成功');
  },
  fail: (err) => {
    console.log('H5可能无法直接调起地图:', err);
    // 备用方案：跳转URL
    window.location.href = `https://uri.amap.com/marker?position=116.405285,39.904989&name=北京市`;
  }
});

2. 直接跳转至第三方地图URL（兼容性更好）

如果 uni.openLocation 在部分浏览器失效，可手动拼接URL跳转：

  • 高德地图：
    window.location.href = `https://uri.amap.com/marker?position=经度,纬度&name=位置名称`;
  • 百度地图：
    window.location.href = `https://api.map.baidu.com/marker?location=纬度,经度&title=位置名称&output=html`;
  • 腾讯地图：
    window.location.href = `https://apis.map.qq.com/uri/v1/marker?coord=纬度,经度&title=位置名称&referer=您的KEY`;

注意事项：

  1. H5限制：浏览器可能阻止自动跳转，需用户触发（如点击按钮）。
  2. 坐标系：UniApp 默认使用 WGS84（GPS标准），高德/百度需转换（可用 uni.chooseLocation 获取坐标）。
  3. 备用方案：建议配合 uni.getSystemInfo 判断平台，H5优先使用URL跳转。

完整示例（点击按钮打开地图）：

<template>
  <button @click="openMap">打开地图</button>
</template>

<script>
export default {
  methods: {
    openMap() {
      // 直接使用URL跳转（推荐H5）
      window.location.href = 'https://uri.amap.com/marker?position=116.405285,39.904989&name=北京市';
    }
  }
}
</script>

推荐优先使用 高德/百度地图URL方案，兼容性更稳定。

回到顶部