uniapp中获取位置信息处理
·
在微信小程序中,获取定位,是需要用户授权的,那么当用户拒绝授权后,需要重新获取定位时,是不会再调起授权界面,这时需要用户主动打开设置界面,才可以重新开启授权权限;
那么,在uniapp中获取位置信息处理,要兼容用户同意授权、拒绝授权情况下,最终能成功获取到位置信息的,做以下处理:
处理逻辑
一、获取定位时,用户同意授权获取定位,得到位置信息;
第1步:获取用户当前的授权状态 =>
第2步:判断是同意授权位置时 =>
第3步:获取位置
二、获取定位时,用户拒绝授权获取定位的:
第1步:获取用户当前的授权状态 =>
第2步:判断是未同意授权位置时,引导用户打开设置界面,重新选择授权功能 =>
第3步:用户选择允许授权后
第4步:重新获取位置,得到位置信息
第3步:用户选择不允许授权后
第4步:可至第1步,继续重新获取位置
引用文件可多页面复用的处理逻辑代码
引用文件:
import { doGetLocation } from '@/utils/getLocation.js';
需要获取位置代码处执行:
doGetLocation((data)=>{
console.log(data);
})
getLocation.js:
// import { doGetLocation } from '@/utils/getLocation.js';
let isOpenSetting;
/**
* 获取定位,兼容用户拒绝授权及相关处理(获取用户当前的授权状态 => 未同意授权位置时,引导用户打开设置界面,重新选择授权功能 => 允许后重新获取位置)
*/
export function doGetLocation(callback){
isOpenSetting = false; // 是否打开设置界面
// 获取用户当前的授权状态
uni.getSetting({
success: (settingRes) => {
console.log(settingRes)
console.log(isOpenSetting)
// 判断用户未同意授权位置时,提示并引导用户去打开设置界面,用户可重新选择授权功能
if (!isOpenSetting && typeof(settingRes.authSetting['scope.userLocation']) != 'undefined' && !settingRes.authSetting['scope.userLocation']) {
uni.showModal({
title: '需要授权获取您的位置信息',
content: '你的位置信息将用于为您提供更合适您的服务',
success: (data) => {
if (data.confirm) {
isOpenSetting = true;
// 打开设置界面
uni.openSetting({
success: (response) => {
if(response.authSetting['scope.userLocation']){
console.log('重新授权获取位置信息-同意');
// 重新获取定位
getLocation((data)=>{
callback({
isOpenSetting:isOpenSetting,
...data
})
});
}else{
console.log('重新授权获取位置信息-未同意');
callback({
isOpenSetting:isOpenSetting,
latitude : '',
longitude : '',
})
}
},
fail:()=>{
console.log('openSetting接口调用失败的回调函数');
}
})
} else if (data.cancel) {
console.log('showModal接口:用户点击取消未打开设置界面');
callback({
isOpenSetting:isOpenSetting,
latitude : '',
longitude : '',
})
}
},
fail: function(){
console.log('showModal接口:调用失败的回调函数');
}
});
}else{
// 重新获取定位
getLocation((data)=>{
callback({
isOpenSetting:isOpenSetting,
...data
})
});
}
}
})
}
/**
* 获取位置
*/
export function getLocation(callback){
uni.getLocation({
//type: 'wgs84',
type: 'gcj02',
success: (res)=>{
console.log(res);
callback({
latitude : res.latitude,
longitude : res.longitude,
})
},
fail: (res)=>{
console.log('用户拒绝授权获取位置信息,使用默认经纬度0 0');
callback({
latitude : '',
longitude : '',
})
},complete: (res)=>{
// console.log(res);
// 根据位置数据更新页面数据
}
});
}
直接在页面中处理逻辑代码
需要获取位置代码处执行:
this.doGetLocation();
methods中处理方法:
methods: {
// ......
// 获取定位,兼容用户拒绝授权及相关处理(获取用户当前的授权状态 => 未同意授权位置时,引导用户打开设置界面,重新选择授权功能 => 允许后重新获取位置)
doGetLocation(){
this.isOpenSetting = false; // 是否打开设置界面
// 获取用户当前的授权状态
uni.getSetting({
success: (settingRes) => {
console.log(settingRes)
console.log(this.isOpenSetting)
// 判断用户未同意授权位置时,提示并引导用户去打开设置界面,用户可重新选择授权功能
if (!this.isOpenSetting && typeof(settingRes.authSetting['scope.userLocation']) != 'undefined' && !settingRes.authSetting['scope.userLocation']) {
uni.showModal({
title: '需要授权获取您的位置信息',
content: '你的位置信息将用于为您提供更合适您的服务',
success: (data) => {
if (data.confirm) {
this.isOpenSetting = true;
// 打开设置界面
uni.openSetting({
success: (response) => {
if(response.authSetting['scope.userLocation']){
console.log('重新授权获取位置信息-同意');
// 重新获取定位
this.getLocation();
}else{
console.log('重新授权获取位置信息-未同意');
this.doGetLocationAfter({
latitude : '',
longitude : '',
isOpenSetting : this.isOpenSetting,
})
}
},
fail:()=>{
console.log('openSetting接口调用失败的回调函数');
}
})
} else if (data.cancel) {
console.log('showModal接口:用户点击取消未打开设置界面');
this.doGetLocationAfter({
latitude : '',
longitude : '',
isOpenSetting : this.isOpenSetting,
})
}
},
fail: function(){
console.log('showModal接口:调用失败的回调函数');
}
});
}else{
// 重新获取定位
this.getLocation();
}
}
})
},
// 获取位置
getLocation(){
uni.getLocation({
//type: 'wgs84',
type: 'gcj02',
success: (res)=>{
console.log(res);
this.doGetLocationAfter({
latitude : res.latitude,
longitude : res.longitude,
isOpenSetting : this.isOpenSetting,
})
},
fail: (res)=>{
console.log('用户拒绝授权获取位置信息,使用默认经纬度0 0');
this.doGetLocationAfter({
latitude : '',
longitude : '',
isOpenSetting : this.isOpenSetting,
})
// 根据位置数据更新页面数据
},complete: (res)=>{
// console.log(res);
// 根据位置数据更新页面数据
}
});
},
// 最终获取到的信息数据
doGetLocationAfter(data){
console.log(data)
if(data.latitude != this.latitude || data.longitude != this.longitude){
this.latitude = data.latitude;
this.longitude = data.longitude;
// 根据位置数据更新页面数据
}else{
console.log('位置信息无变化');
}
// 在这里处理最终获取到的信息数据
},
// ......
}
uniapp API文档
获取定位:
uni.getLocation(OBJECT) 获取当前的地理位置、速度
https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
获取用户当前的授权状态:
uni.getSetting(OBJECT) 获取用户的当前设置。
https://uniapp.dcloud.net.cn/api/other/setting.html#getsetting
打开设置界面:
uni.openSetting(OBJECT) 调起客户端小程序设置界面,返回用户设置的操作结果。
https://uniapp.dcloud.net.cn/api/other/setting.html#opensetting
更多推荐
已为社区贡献1条内容
所有评论(0)