微信小程序附近定位实现（百度地图）

微信小程序附近定位实现（百度地图）

index.xml部分

<map id="map"

longitude="{{longitude}}" //longitude 纬度坐标

latitude="{{latitude}}" //latitude 经度坐标

scale="16" //scale 缩放级别，取值范围为3-20

show-location //是否在map上显示自身
markers="{{markers}}" // markers为数组

bindmarkertap="clickMarker" //绑定clickMarker

></map>

里面有详细介绍

map | 微信开放文档
​
[developers.weixin.qq.com](https://developers.weixin.qq.com/miniprogram/dev/component/map.html)
图标
百度地图api

index.js部分

var bmap = require('../../utils/bmap-wx.js') //引入百度地图api
var ak = ak //需自行在百度地图创建引入ak


​
lbsyun.baidu.com
//构造百度地图api实例
var BMap = new bmap.BMapWX({
ak: ak
})

//用于保存BMap.search接口返回的数据
var wxMarkerData = []

//查询当前位置的poi信息
search:function(e){
var that = this
//查询失败，直接打印log
var fail = function(data) {
console.log(data)
}
//查询成功后将结果数据动态绑定到页面上
var success = function(data) {
// console.log(data);
wxMarkerData = data.wxMarkerData;
that.setData({
markers: wxMarkerData
})
that.setData({
latitude: wxMarkerData[0].latitude
})
that.setData({
longitude: wxMarkerData[0].longitude
})
}

//使用百度api查询周边信息
//其中使用到了dataset属性
BMap.search({
query: e.target.dataset.type,
success: success,
fail: fail
})
},

clickMarker(e){ //map 上绑定的函数
var that = this;
var markersy = that.data.markers

// console.log(e.detail.markerId);
for (var i = 0; i < markersy.length; i++) { //利用循环对比marker和markers中一样的ID
if (e.detail.markerId == markersy[i].id) { //得到点击map上面的经纬度坐标
// console.log("markers" + that.markersy[i].longitude+" "+that.markersy[i].latitude);
var navi_lng=markersy[i].longitude;
var navi_lat=markersy[i].latitude;
// console.log(navi_lng,navi_lat);
var towerNum=markersy[i].title;
wx.openLocation({ //将此经纬度通过openlocation导航
latitude: navi_lat,
longitude: navi_lng,
name:towerNum
})
}
}
}

至此完毕，欢迎大佬交流讨论，刚学习微信小程序，有出入的地方多多指教，谢谢,只此一家，严禁转发，如要转发，带上备注。。。。。。。。。。！！！！！！