uniapp,获取用户地理位置信息授权,如果拒绝的话需要引导用户重新请求授权操作

问题描述:uniapp项目编译成小程序,获取用户地理位置信息授权,如果用户拒绝授权的话,需要引导用户重新请求授权。

//https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview  --------这个是下载小程序sdk 地址,腾讯地图官网地址

见代码:

//假设一进入首页,就发送获取用户地理位置授权的请求,弹出授权弹框后,假设用户点击了拒绝后,若用户重新点击某区域(先假设点击区域是需要用户位置授权的),
然后,检测到用户未授权,
那么就让用户跳转到一个界面(专门处理用户授权的界面,界面内容很简单,就一个'开通权限'按钮,然后提示语啥的),点击界面里的开通权限按钮,引导用户进行位置授权即可。
index.vue 界面
<template>
<view>
//假设用户点击该区域
<view @click="handleClick">点击区域</view>
</view>

</template>
<script>
let QQMapWX = require('@/utils/qqmap-wx-jssdk.js');//引入sdk核心类
let qqmapsdk; //这里是在腾讯地图官网下载小程序sdk文件,然后把它放在utils文件中,或者其他位置也可,看个人习惯哈。
export default{
data(){
return{
currentCity:'未定位'
}
},
onLoad(){
//实例化api核心类
qqmapsdk = new QQMapWX({
key:'',//密钥,申请的key值
})
},
onShow(){
this.getUserLocation();
},
methods:{
handleClick(){
//这里假设没有授权,就去引导授权界面,反之,直接去目的地即可
if(this.currentCity=='未定位'){
wx.getSetting({
success:(res)=>{
if(res.authSetting['scope.userLocation']!=undefined && res.authSetting['scope.userLocation']!=true){
uni.navigateTo({
url:'跳转到 开通权限按钮界面,引导用户授权哦'
})
}
}
})
}else{
//已授权
}
},
getUserLocation(){//判断用户是否拒绝地理位置信息授权,拒绝的话重新请求授权
let that = this;
wx.getSetting({
success:(res)=>{
if(res.authSetting['scope.userLocation']!=undefined && res.authSetting['scope.userLocation']!=true){
wx.showModal({
title:'请求授权当前位置',
content:'需要获取您的地理位置,请确认授权',
success:function(res){
if(res.cancel){
//用户拒绝授权
}else if(res.confirm){
wx.openSetting({
success:function(dataAu){
if(dataAu.authSetting['scope.userLocation'] == true){
//授权成功
that.getLocation();
}else{
//授权失败
}
},
fail:function(error){
console.log(error,'error');
}
})
}
}
})
}else if(res.authSettin['scope.userLocation']==undefined){
that.getLocation();
}else{
that.getLocation();
}
}
})
},
//获取定位当前的经纬度
getLocation(){
let that = this;
wx.getLocation({
type:'wgs84',
success:function(res){
let latitude = res.latitude;
let longitude = res.longitude;
that.getLocal(latitude,longitude);
},
fail:function(error){
console.log('fail'+JSON.stringify(res));
}
})
},
//获取当前地理位置---解析地址
getLocal(latitude,longtitude){
let that = this;
qqmapsdk.reverseGeocoder({
location:{
latitude:latitude,
longitude:longitude
},
success:function(res){
let city = res.result.address_component.city;
let cityName = city.substring(0,city.length-1);//把成都市,市字截取掉
that.currentCity = cityName;//赋值

//数组.unshift();往数组第一个位置追加进去
},
fail:function(error){

}
})
}
}
}
</script>

//引导授权界面 defaultpage.vue, 这个界面不用写其他逻辑,就这么点内容即可哦
<template>
<view>
<button open-type="openSetting" plain="true" @click="openSetting">开通权限</button>
</view>

</tempalte>
<script>
export default{
data(){
return{

}
},
methods:{
openSetting(){

}
}

}
</script>

 

posted on 2020-11-06 17:19  有匪  阅读(2217)  评论(0编辑  收藏  举报

导航