在小程序中使用百度地图

黑猫_默雨

已于 2022-07-21 15:47:27 修改

阅读量9.8k

点赞数 2

分类专栏：小程序文章标签：小程序百度 javascript

于 2022-07-11 22:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44001906/article/details/125726405

版权

本文介绍了如何在微信小程序中集成百度地图API，包括获取密钥、引入JS模块、设置请求合法域名，以及展示了地址解析的使用示例，并列举了如POI检索等功能，最后提到了小程序获取定位的权限问题和解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、获取密钥

进入百度开放平台官网，点击右上角“API控制台”，注册成为百度地图开发者。

进入控制台，创建一个新应用。填写相应信息时，应用类型选择【微信小程序】，APPID填写小程序开发者ID。

在这里插入图片描述

点击提交后，即可在查看应用页面看到申请成功的密钥（AK）。

二、引入JS模块

在项目根目录下新建一个路径，下载百度地图微信小程序JavaScript API，解压后的文件中有 bmap-wx.js 文件(压缩版 bmap-wx.min.js )，将其拷贝到新建的路径下，安装完成。

三、设置请求合法域名

登录微信公众平台－> “开发” －> “开发管理” －> ”开发设置“－> “服务器域名”－> “request 合法域名” －>添加 https://api.map.baidu.com－> 点击"保存并提交"

打开开发者工具－> “项目配置” －> 点击"刷新"，合法域名设置同步完成

在这里插入图片描述

四、使用示例——地址解析

将结构化地址（省/市/区/街道/门牌号）解析为对应的经纬度坐标。主要方法：BMapWX对象的geocoding(geocodingParam: Object)

wxml代码：

<view class="map_container"> 
  <map class="map" id="map" longitude="{
    {longitude}}" latitude="{
    {latitude}}" scale="14" show-location="true" markers="{
    {markers}}" bindmarkertap="makertap"></map> 
</view> 
<view class="rgc_info"> 
  <view>经度：{
  {longitude}}</view>

最低0.47元/天解锁文章