uniapp 如何使用webview加载高德地图

我在uniapp中想用webview加载高德地图页面，但总是显示空白或加载失败。具体遇到的问题是：

  1. 在安卓和iOS真机调试时webview无法正常显示高德地图
  2. 尝试过配置manifest.json的webview相关设置，但问题依旧
  3. 在H5端可以正常显示，但打包成app就不行

想请教各位有经验的大佬：

  • webview加载高德地图的正确方式是什么？
  • 需要特殊配置哪些权限或参数？
  • 是否有完整的示例代码可以参考？
2 回复

在uniapp的webview组件中，直接设置src为高德地图网页版链接即可。例如：

<webview src="https://uri.amap.com/marker?position=经度,纬度"></webview>

记得在manifest.json中配置网络权限。


在 UniApp 中使用 webview 组件加载高德地图，可以通过以下步骤实现：

1. 获取高德地图网页版 URL

高德地图网页版 URL 格式为：
https://uri.amap.com/marker?position=经度,纬度&name=位置名称
例如：
https://uri.amap.com/marker?position=116.397428,39.90923&name=天安门

2. 在 UniApp 页面中使用 webview 组件

在 .vue 文件中添加以下代码：

<template>
  <view>
    <webview :src="mapUrl"></webview>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mapUrl: '' // 高德地图 URL
    }
  },
  onLoad(options) {
    // 示例：动态设置经纬度和位置名称
    const longitude = options.lng || '116.397428'; // 经度
    const latitude = options.lat || '39.90923';     // 纬度
    const name = options.name || '天安门';           // 位置名称
    
    this.mapUrl = `https://uri.amap.com/marker?position=${longitude},${latitude}&name=${encodeURIComponent(name)}`;
  }
}
</script>

3. 注意事项

  • 权限配置：在 manifest.json 中确保已允许网络访问：
    {
  "networkTimeout": {
    "request": 10000
  },
  // H5 配置（如需在浏览器中运行）
  "h5": {
    "devServer": {
      "disableHostCheck": true
    }
  }
}
  • 平台限制：
    • App 平台：webview 组件可直接使用。
    • H5 平台：部分浏览器可能限制嵌套网页，建议直接跳转外部浏览器（使用 window.location.href）。
    • 微信小程序：不支持 webview 加载外部网页，需使用小程序原生地图组件。

4. 完整示例（动态传参）

<template>
  <view>
    <webview :src="mapUrl"></webview>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mapUrl: ''
    }
  },
  onLoad(options) {
    const { lng, lat, name } = options;
    if (lng && lat) {
      this.mapUrl = `https://uri.amap.com/marker?position=${lng},${lat}&name=${encodeURIComponent(name || '位置')}`;
    } else {
      console.error('缺少经纬度参数');
    }
  }
}
</script>

5. 扩展功能

  • 添加多个标记点：使用 &markers=经度,纬度,名称 参数重复拼接。
  • 路线规划：通过 https://uri.amap.com/navigation?to=经度,纬度,名称 实现。

通过以上步骤，即可在 UniApp 中通过 webview 加载高德地图并显示指定位置。

回到顶部