uniapp中获取位置信息处理步骤
作者：羽筠
在uniapp中获取位置信息处理,要兼容用户同意授权、拒绝授权情况下,最终能成功获取到位置信息的,本文给大家介绍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
到此这篇关于uniapp中获取位置信息处理的文章就介绍到这了,更多相关uniapp中获取位置信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！