今天发现百度地图也支持小程序了，上手了下，集成也很简单。
小程序目前只能获取经、纬度, 如果想获取具体的城市、地址就需要借助第三方的了。
百度地图提供了逆地址解析功能，实现经纬度到地址的转换。
如何使用
1. 第一步 创建账号和秘钥(AK)
注册
进入百度开放平台官网，点击右上角“API控制台”，注册成为百度地图开发者。
如果未登录百度账号，会引导登录百度账号。
如果账号未注册，请根据提示填写正确的邮箱及手机号完成开发者注册流程。
创建应用
再次点击进入控制台，创建一个新应用。
获取密钥（AK）
在创建应用页面，录入应用名称、选择应用类型为"微信小程序"、勾选启用服务、填写AppID(小程序ID)。
点击提交后，即可在查看应用页面看到申请成功的密钥（AK）。
2. 第二步 创建小程序并导入百度地图依赖库
创建本地小程序项目
① 打开微信小程序开发者工具并使用微信确认登录。
② 点击 "+" 按钮，添加项目。
③ 点击 "添加项目" 按钮，项目创建完成。
注意：需勾选"在当前目录中创建quick start项目"。
引入JS模块
在项目根目录下新建一个路径，下载百度地图微信小程序JavaScript API，解压后得到 bmap-xw.js 文件，将其拷贝到新建的路径下，安装完成。
如下图所示，新建路径 "libs" ,将 bmap-xw.js 文件拷贝至 "libs" 路径下。
3. 第三步 在微信公众平台上为刚创建的小程序配置百度地图api域名
① 需要设置请求合法域名，才能正常使用百度小程序 JavaScript API。
登录微信公众平台－> "设置" －> "开发设置" －> "request 合法域名" －>添加 api.map.baidu.com －> 点击"保存并提交"，如图所示：
4. 第四步 写代码了
1、打开快速创建的微信小程序 pages/index/index.js 文件，用下面的代码完全替换原代码。
在以下的代码中，首先引用百度地图微信小程序JavaScript API 模块，然后在页面的onLoad中声明BMapWX对象，最后调用BMapWX.regeocoding方法进行逆地址解析（从经纬度转换为地址信息）。
// 引用百度地图微信小程序JSAPI模块
var bmap = require('../../libs/bmap-wx.js');
var wxMarkerData = [];
Page({
data: {
markers: [],
latitude: '',
longitude: '',
rgcData: {}
},
makertap: function(e) {
var that = this;
var id = e.markerId;
that.showSearchInfo(wxMarkerData, id);
},
onLoad: function() {
var that = this;
// 新建百度地图对象
var BMap = new bmap.BMapWX({
ak: '您的ak'
});
var fail = function(data) {
console.log(data)
};
var success = function(data) {
wxMarkerData = data.wxMarkerData;
that.setData({
markers: wxMarkerData
});
that.setData({
latitude: wxMarkerData[0].latitude
});
that.setData({
longitude: wxMarkerData[0].longitude
});
}
// 发起regeocoding检索请求
BMap.regeocoding({
fail: fail,
success: success,
iconPath: '../../img/marker_red.png',
iconTapPath: '../../img/marker_red.png'
});
},
showSearchInfo: function(data, i) {
var that = this;
that.setData({
rgcData: {
address: '地址：' + data[i].address + '\n',
desc: '描述：' + data[i].desc + '\n',
business: '商圈：' + data[i].business
}
});
}
})2、为能够正常展示地图和检索结果，打开 pages/index/index.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">
<text>{{rgcData.address}}</text>
<text>{{rgcData.desc}}</text>
<text>{{rgcData.business}}</text>
</view>3、拷贝样式代码到 pages/index/index.wxss文件。
.map_container{
height: 300px;
width: 100%;
}
.map {
height: 100%;
width: 100%;
}4、最后保存修改，即可看到示例效果。本示例在页面加载完成后对当前定位点进行了逆地址解析，点击marker可以看到当前地点的相关位置描述信息。
