因为公司项目要用到地图导航等功能，而目前微信开放的map组件以及API暂时无法满足需求，所以考虑到引入百度地图的API。
1.注册百度开发账号
地址：http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key
点击链接进入一下页面，上面有详细介绍。不过目前在我写的时候，教程的图文稍微有点不匹配，重新介绍下。
可以看到有使用方法，点击右上角 控制台。未注册的会引导注册，注册完成的会进入以下页面
点击 创建应用，填写名称 应用类型勾选为微信小程序 以及小程序的APPID填写。最后提交
成功后可以点击 查看应用 这里面就有你所需要的AK了。
2.下载百度地图API的js文件
地址：http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/project
假设你已经创建自己的小程序了。点击红框圈中部分开始下载。最后会的到bmap-wx.js和bmap-wx.min.js。一个没压缩一个压缩。
3.引入百度地图API
本人项目路径大概是这样子的，用的是bmap-wx.min.js，体积小点。
在你需要使用的js文件中引入bmap-wx.min.js。使用相对路径。
//引入 bmap-wx.min.js
var bmap = require('../libs/bmap-wx.min.js');
// new一个百度地图对象
var BMap = new bmap.BMapWX({
ak: "先前申请的AK"
});
这样就成功的引入了百度地图API。但是因为使用百度地图的API相当于访问一个https链接，然后返回数据给你，所以需要小程序配置合法域名。
用管理员账号登录微信公众平台，在设置选项里面。配置合法域名
api.map.baidu.com。
提交后，打开开发者工具，点击右上角的 详情 ，可以看到刚刚配置的合法域名已经显示在上面了，OK，配置成功。
好了，现在就完成准备工作了。
// new一个百度地图对象
var BMap =
new bmap.BMapWX({
ak: "先前申请的AK"
});
先前new的对象就可使用了。
3.上代码，测试一下。
API地址：https://github.com/baidumapapi/wxapp-jsapi
可以看到有四个接口，随便来一个试试吧。
wxml:
<map
class="map"
id="map" longitude="{{longitude}}"
latitude="{{latitude}}"
scale="14"
show-location="true"
markers="{{markers}}"
bindmarkertap="makertap">
</map>
js:
//引入 bmap-wx.min.js
var bmap = require('../libs/bmap-wx.min.js');
// new一个百度地图对象
var BMap = new bmap.BMapWX({
ak: "先前申请的AK"
});
Page({
/**
* 页面的初始数据
*/
data: {
markers: [],
latitude: '',
longitude: '',
},
onLoad: function () {
//首先获取经纬度
},
//首先获取经纬度
getWxLocation:function(){
var _this =
this;
//调用wx.getLocation()获取经纬度
wx.getLocation({
type:
'wgs84',
success: function (res) {
var latitude = res.latitude
var longitude = res.longitude
var speed = res.speed
var accuracy = res.accuracy
_this.setData({
latitude: latitude,
longitude: longitude
})
//获取成功后调用百度地图检索周边接口
_this.search();
}
})
},
//调用检索周边接口
search: function (){
var _this =
this;
BMap.search({
//小程序marker图标 必填
iconPath: '../img/marker_red.png',
//关键字
query: "美食",
success:function(res){
console.log(res);
_this.setData({
markers:res.wxMarkerData
})
},
})
},
//点击marker
makertap: function (e) {
var id = e.markerId;
console.log(this.data.markers[id])
},
在这里是使用search接口查看是否引入正确。
文档上面只有一个必填参数
iconPath，其他的看自己意愿是否填写。
本人这里用到了 query 和 success 。query用来筛选搜索的内容，是选择搜索 美食 还是 酒店 还是其他的，随自己意愿。
success 搜索成功后的回调函数。
我选择在控制台打印一下获得的数据
可以看到打印的数据有两个字段，一个是originalData，一个是wxMarkerData。originalData是他原生的数据，而wxMarkerData是稍作处理了的数据
wxMarkerData可以直接和
map组件中的markers绑定在一起。数组的最大长度为10，本人在测试过程中尚未发现最大长度超过10。
点开其中某一个，可以看到里面有 详细地址，名称，经纬度，电话等信息。
wxss:
map{
width: 100%;
height: 300px;
}
保存一下代码，小程序页面刷新。
紫色框中的蓝色圆圈就是获取到的位置，周围红色的图标就是markers。map组件上要设置show-location="true"圆圈才会显示出。
随便点击一个marker,可以通过e.markerId获取到该marker的id。通过id，获取改marker的详细信息。
上面的代码可以直接复制粘贴，不过要注意把AK改成自己所申请的。
以上就是全部内容了，欢迎大家指出其中不足。