1.原理
前百度和高德周边查询api的实现机制基本一致,都是使用request接口请求远程https接口,然后返回参数中位置的某种类型的周边信息,最后再把数据动态绑定到页面。
2. js 引入模块
在项目根目录下新建一个路径,下载百度地图微信小程序JavaScriptAPI,解压后得到bmap-xw.js 文件,将其拷贝到新建的路径下,安装完成。
var bmap = require('../../libs/bmap-wx.js');
3. 获取地图
-
3.1 新建百度地图
首先小程序获取当前位置api,下面的图片路径请自行按照个人文件路径添加,这也是我没有思维的地方。因为我不知道怎么引入地图在小程序里,并且对map组件没有了解,
wxMarkerData = data.wxMarkerData;
that.setData({
markers: wxMarkerData,
fail: fail,
});
that.setData({
latitude: wxMarkerData[0].latitude
});
that.setData({
longitude: wxMarkerData[0].longitude
});
}
that.setData({
success: success
});
-
3.2 获得信息
让触发的位置改变颜色
makertap: function (e) {
var that = this;
var id = e.markerId;
that.showSearchInfo(wxMarkerData, id);
that.changeMarkerColor(wxMarkerData, id);
},
- 3.3 setData渲染到页面里,并且显示详情信息 如具体位置,电话,名称
showSearchInfo: function (data, i) {
var that = this;
that.setData({
placeData: {
title: '名称:' + data[i].title + '\n',
address: '地址:' + data[i].address + '\n',
telephone: data[i].telephone == undefined ? '电话:暂无信息' : '电话:' + data[i].telephone
}
});
},