在小程序中使用百度地图

一、获取密钥

进入百度开放平台官网，点击右上角“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><view>纬度：{{latitude}}</view>
</view>
<view><input placeholder="输入关键字" type="text" value="{{searchText}}"bindinput="handleInputChange"/><button bindtap="search">搜索</button>
</view>

js代码：

// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../libs/bmap-wx.js'); //bmap-wx.js文件存放路径
var wxMarkerData = [];
Page({ data: {BMap: null,searchKeyword: '',markers: [], latitude: '', longitude: '', rgcData: {} }, onLoad: function() { // 新建百度地图对象 this.data.BMap = new bmap.BMapWX({ ak: 'xxx' //百度地图密钥}); this.toSearch("北京")},handleInputChange: function (e) {this.data.searchKeyword = e.detail.value},search: function () {this.toSearch(this.data.searchKeyword)},toSearch: function (keyword) {let that = this;//重要，必须let fail = function(data) { console.log(data)};let success = function(data) { wxMarkerData = data.wxMarkerData; that.setData({ markers: wxMarkerData }); that.setData({ latitude: wxMarkerData[0].latitude }); that.setData({ longitude: wxMarkerData[0].longitude }); } // 发起geocoding检索请求 that.data.BMap.geocoding({ address: keyword, fail: fail, success: success, iconPath: '../../img/marker_red.png', iconTapPath: '../../img/marker_red.png' }); }
})

wxss代码

.map_container{ height: 420px; width: 100%;
} .map { height: 100%; width: 100%;
}.rgc_info {padding: 5px;
}
.rgc_info {display: block;
}

效果：

五、功能汇总

POI检索：搜索附近的美食、酒店。

方法：search(searchParam: Object)

参数 searchParam: Object 对象结构

属性名	类型	是否必须	描述
location	string	否	经纬度例如：39.915,116.404 默认值为当前定位点
iconPath	string	是	小程序marker图标
iconTapPath	string	否	小程序点击后图标
width	number	否	marker宽，默认为图片宽度
height	number	否	marker高，默认为图片高度
alpha	number	否	marker透明度，默认为1
query	string	否	检索关键字，默认为生活服务、美食、酒店
success	Function(searchSuccess)	否	检索成功后回调回调函数
fail	Function(searchFail)	否	检索失败后回调函数

注：其他参数和Place API请求参数一致。

POI检索词联想：供匹配输入关键字的辅助信息数据，返回关键字类的相关结果。

方法：suggestion(suggestionParam: Object)

参数 suggestionParam: Object 对象结构

属性名	类型	是否必须	描述
success	Function(suggestionSuccess)	否	检索成功后回调函数
fail	Function(suggestionFail)	否	检索失败后回调函数

注：其他参数和Place Suggestion API请求参数一致。

地址解析：将结构化地址（省/市/区/街道/门牌号）解析为对应的经纬度坐标。比如将"北京市海淀区上地十街10号"转化为"116.30051,40.0511"。当然，地址结构越完整，地址内容越准确，解析的坐标精度也会越高。

方法：geocoding(geocodingParam: Object)

参数 geocodingParam: Object 对象结构

属性名	类型	是否必须	描述
address	string	是	待解析地址，如"北京市海淀区上地十街10号"
iconPath	string	是	小程序marker图标
iconTapPath	string	否	小程序点击后图标
width	number	否	marker宽，默认为图片宽度
height	number	否	marker高，默认为图片高度
alpha	number	否	marker透明度，默认为1
success	Function(geocodingSuccess)	否	检索成功后回调函数
fail	Function(geocodingFail)	否	检索失败后回调函数

注：其他参数和Geocoding请求参数一致。

逆地址解析：根据经纬度获得对应的地理描述信息，默认对当前定位后的坐标进行解析，也可以在调用时指定经纬度进行解析。

方法：regeocoding(regeocodingParam: Object)

参数 regeocodingParam: Object 对象结构

location	string	否	要解析的经纬度例如：39.915,116.404 默认值为当前定位点
iconPath	string	是	小程序marker图标
iconTapPath	string	否	小程序点击后图标
width	number	否	marker宽，默认为图片宽度
height	number	否	marker高，默认为图片高度
alpha	number	否	marker透明度，默认为1
success	Function(regeocodingSuccess)	否	检索成功后回调函数
fail	Function(regeocodingFail)	否	检索失败后回调函数

注：其他参数和Geocoding请求参数一致。

更多详情参考：微信小程序JavaScript API | 百度地图API SDK (baidu.com)

官方类参考和Demo：GitHub - baidumapapi/wxapp-jsapi: 百度地图微信小程序jsapi

六、其他注意事项

小程序获取定位可能需要授权，定位提示：微信小程序getLocation 需要在app.json中声明permission字段

解决方法：

在app.json文件中进行添加下面配置
```
"permission":{"scope.userLocation": {"desc": "是否允许小程序获取位置信息？"}
}
```
参考；微信小程序getLocation 需要在app.json中声明permission字段_但许星辰静月的博客-CSDN博客_getlocation需要在app.json中声明
官方开发指南中还有天气查询功能，经测试该方法不可用，在github更新日志中有一条：

2020.09：由于ak鉴权限制，小程序端jsapi暂不支持天气服务，可以通过webAPI天气服务调用。