主要内容:微信内置地图查看当前位置,打开手机地图导航软件去定位的地方。会在使用前请求用户授权scope.userLocation,若此时用户拒绝授权,再点击不会重新提醒用户授权,功能无法使用。需使用wx.getSetting查看用户的授权信息,wx.openSetting重新打开授权,授权之后地图功能才可使用。
说的有点绕,一步步来写,完整代码在文章末尾会贴上。
1、调用微信内置地图,并导航到目的地,并未处理未授权情况
允许授权后进入微信内置地图,点击右下角到那去的图标即可调用手机已有的地图软件,并导航到目的地。
效果图
【JS代码】,WXML代码没什么好贴的,随便写个东西,bindtap调用地图的事件就好。
openMap: function () {
let that = this
// 获取用户当前地理位置
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function (res) {
wx.openLocation({
latitude: 23.193884,//齐富大酒店纬度
longitude: 113.269584,//齐富大酒店的经度
scale: 28,
name: '齐福大酒店',//位置名
address: 'XXX路000号',//地址的详细描写
success: function (res) {
console.log('成功打印信息' + res)
},
fail: function (err) {
console.log('失败打印信息' + err)
},
})
}
})
若在第一次调用弹出授权选择拒绝的话,再点击无反应不会再次授权。
取消授权
2、加上授权判断,重新授权
我们已经知道如果用户拒绝微信权限弹框,点击不会再次出现弹框重新请求权限,我们先用wx.getSetting判断是否授权,再用wx.openSetting打开权限。wx.openSetting中即使拒绝授权也不会影响再次执行。先上效果图:
权限设置中再次拒绝授权
权限设置中允许获取
【完整代码】
onLoad: function() {
// 获取用户当前地理位置
wx.getLocation({
type: 'gcj02', //返回可以用于wx.openLocation的经纬度
success: function(res) {}
})
},
openMap: function() {
let that = this
//wx.getSetting只能查看已经已经向用户请求过的权限,所以wx.getLocation获取位置信息要放在查看用户权限之前,我放在了onload里
wx.getSetting({
success(res) {
//scope.userLocation是返回的是否打开位置权限,true为打开
if (!res.authSetting['scope.userLocation']) {
wx.openSetting({
//设置权限,这个列表中会包含用户已请求过的权限,可更改权限状态
success(res) {
//如果再次拒绝则返回页面并提示
if (!res.authSetting['scope.userLocation']) {
wx.showToast({
title: '此功能需获取位置信息,请重新设置',
duration: 3000,
icon: 'none'
})
} else {
//允许授权,调用地图
wx.openLocation({
latitude: 23.193884,//佳佳美食广场的维度
longitude: 113.269584,//佳佳美食广场的经度
scale: 28,
name: '齐福大酒店',//位置名
address: 'XXX路000号',//地址的详细描写
success: function (res) {
},
fail: function (err) {
},
})
}
}
})
}else{
wx.openLocation({
latitude: 23.193884,//佳佳美食广场的维度
longitude: 113.269584,//佳佳美食广场的经度
scale: 28,
name: '齐福大酒店',//位置名
address: 'XXX路000号',//地址的详细描写
success: function (res) {
},
fail: function (err) {
},
})
}
}
})
},