小程序实现地图导航功能
源码下载链接
app.json获取导航授权信息
1.desc授权导航是弹窗文字
"permission": {
"scope.userLocation": {
"desc": "导航需要"
}
},
wxml文件中命令
map组件基本命令以及作用
1.bindmarkertap=“biaoji"标记点击的回调函数
2.data-mark=”“标记点击携带的数据
3.latitude=”“纬度
4. longitude=”“经度
5. markers=”"标记基本参数(通过调用js文件中data来实现)
6. scale="17"地图缩放比例
<map class="map" bindmarkertap="biaoji" data-mark="{{markers[0]}}" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" scale="17"></map>
js文件中命令
1.在data中设置地图界面显示的经纬度
2.在data中设置标记点宽高经纬度
3.标记点点击的回调函数
getLocation获取当前自己经纬度
openLocation跳转腾讯地图并查看导航
未授权地理地理位置的处理
1.showModal弹窗请求授权
2.openSetting跳转在小程序中设置页面
data: {
latitude: 31.462191, //纬度
longitude: 104.75028, //经度
markers: [{
id: 1,
width: 50, //标记宽
height: 50, //标记高
latitude: 31.462191,
longitude: 104.75028,
}]
},
biaoji(e) {
console.log("标记目的地点击", e)
wx.getLocation({//获取当前地址信息
type: 'wgs84',
success(res) {
const latitude = res.latitude
const longitude = res.longitude
const speed = res.speed
const accuracy = res.accuracy
wx.openLocation({//跳转腾讯地图查看并可以进行导航
latitude: 31.462191,
longitude: 104.75028,
})
},fail(res){//未授权地理位置处理
wx.showModal({
title: '请授权',
content: '若未授权地理位置,您将不能正常使用导航功能',
confirmText:"授权",
success (res) {
if (res.confirm) {
console.log('用户点击确定')
wx.openSetting({//跳转设置授权界面
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
}```