一、获取密钥
进入百度开放平台官网，点击右上角“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天气服务调用。