uniapp 百度地图如何集成和使用

如何在UniApp中集成和使用百度地图？我按照官方文档尝试了，但在引入SDK和配置密钥时遇到问题。具体操作步骤是什么？是否需要额外安装插件？求一个完整的集成流程示例，包括地图显示、定位和标记等基本功能的实现方法。

2 回复

uniapp集成百度地图步骤：

  1. 申请百度地图API密钥
  2. 安装百度地图插件：npm install vue-baidu-map
  3. 在main.js中引入并配置密钥
  4. 在页面中使用<baidu-map>组件
  5. 通过BMap对象调用地图方法

使用示例：

<baidu-map :center="center" :zoom="zoom"></baidu-map>

注意：需在manifest.json配置地图模块。


在 UniApp 中集成百度地图，可以通过以下步骤实现：

1. 获取百度地图 SDK

  • 访问百度地图开放平台（lbsyun.baidu.com），注册账号并创建应用。
  • 获取 API Key（应用类型选择“浏览器端”）。

2. 在 UniApp 项目中引入百度地图

方法一：使用 WebView 嵌入（简单但功能受限）

在页面中通过 web-view 组件加载百度地图网页版：

<template>
  <web-view src="https://api.map.baidu.com/...?key=您的API_KEY"></web-view>
</template>

方法二：使用原生地图插件（推荐，功能完整）

  1. 安装插件：
    在插件市场搜索“百度地图”插件（如百度地图SDK），按文档导入项目。

  2. 配置 manifest.json：
    在 App SDK 配置中勾选“Maps”并填写百度地图的 App Key：

    "app-plus": {
  "modules": {
    "Maps": {}
  },
  "distribute": {
    "sdkConfigs": {
      "maps": {
        "baidu": "您的API_KEY"
      }
    }
  }
}

3. 使用地图组件

在页面中引入地图组件并初始化：

<template>
  <view>
    <map
      id="myMap"
      style="width: 100%; height: 300px;"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      @markertap="onMarkerTap"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909, // 初始纬度（北京）
      longitude: 116.397, // 初始经度
      markers: [{
        id: 1,
        latitude: 39.909,
        longitude: 116.397,
        title: '天安门'
      }]
    }
  },
  methods: {
    onMarkerTap(e) {
      console.log('点击标记：', e.markerId)
    }
  }
}
</script>

4. 常用功能示例

  • 定位到当前地址：
    使用 uni.getLocation 获取位置后更新地图中心点。
  • 添加自定义标记：
    修改 markers 数组，支持图标、标题等属性。
  • 路线规划：
    通过百度地图 JavaScript API 在 WebView 中实现，或调用原生插件方法。

注意事项

  • 平台限制：
    WebView 方式在 App 端可能体验较差；原生地图仅支持 App 端，小程序需用各自平台地图组件。
  • 密钥安全：
    避免在前端代码硬编码密钥，可通过服务器代理请求或使用配置加密。

完成以上步骤后，即可在 UniApp 中正常使用百度地图功能。如需复杂交互（如搜索、导航），建议结合百度地图 JavaScript API 或插件扩展功能。

回到顶部