uniapp 如何调用百度地图

在uniapp中如何调用百度地图API实现定位和地图展示功能？需要引入SDK还是直接使用webview嵌入？能否提供一个完整的代码示例，包括配置步骤和权限设置？

2 回复

在uniapp中调用百度地图，可通过以下步骤：

  1. 引入百度地图JS SDK：在index.html中引入百度地图API。
  2. 使用web-view组件：在页面中嵌入百度地图网页版。
  3. 或使用第三方插件：如uni-baidu-map插件，支持原生地图功能。

注意：需在百度地图开放平台申请密钥（ak）。


在 UniApp 中调用百度地图可以通过以下两种方式实现：

1. 使用 uni.navigateTo 打开百度地图 App

如果用户设备已安装百度地图 App，可直接通过 URL Scheme 跳转并传递坐标。

示例代码：

// 目标经纬度（例如北京天安门）
let latitude = 39.908823;
let longitude = 116.397470;

// 生成百度地图 URL Scheme
let url = `baidumap://map/marker?location=${latitude},${longitude}&title=目标位置&src=yourAppName`;

// 跳转到百度地图
uni.navigateTo({
  url: `/${url}`
});

参数说明：

  • location：经纬度（纬度,经度）。
  • title：地点名称（可选）。
  • src：应用来源标识（可选）。

2. 使用 WebView 嵌入百度地图网页版

如果未安装百度地图 App，可通过 WebView 加载百度地图网页版。

步骤：

  1. 在 pages.json 中配置 WebView 页面：
{
  "path": "pages/map/webview",
  "style": {}
}
  1. 创建 WebView 页面（pages/map/webview.vue）：
<template>
  <web-view :src="mapUrl"></web-view>
</template>

<script>
export default {
  data() {
    return {
      mapUrl: ''
    };
  },
  onLoad(options) {
    // 从参数获取经纬度，生成百度地图网页版 URL
    let lat = options.lat || 39.908823;
    let lng = options.lng || 116.397470;
    this.mapUrl = `https://api.map.baidu.com/marker?location=${lat},${lng}&title=我的位置&output=html&src=yourAppName`;
  }
};
</script>
  1. 跳转到 WebView 页面：
uni.navigateTo({
  url: `/pages/map/webview?lat=39.908823&lng=116.397470`
});

注意事项：

  • URL Scheme 兼容性：不同设备对 Scheme 支持可能不同，需测试 fallback 方案（如提示安装百度地图）。
  • 坐标体系：百度地图使用 BD-09 坐标系，若使用 GPS 坐标（WGS-84）需先转换。
  • 权限配置：在 manifest.json 中确认已配置相关 URL 类型（App 平台）。

通过以上方法，即可在 UniApp 中灵活调用百度地图功能。

回到顶部