uniapp中获取位置信息处理

在微信小程序中,获取定位,是需要用户授权的,那么当用户拒绝授权后,需要重新获取定位时,是不会再调起授权界面,这时需要用户主动打开设置界面,才可以重新开启授权权限;

那么,在uniapp中获取位置信息处理,要兼容用户同意授权、拒绝授权情况下,最终能成功获取到位置信息的,做以下处理:

处理逻辑

一、获取定位时,用户同意授权获取定位,得到位置信息;

第1步:获取用户当前的授权状态 =>

第2步:判断是同意授权位置时 =>

第3步:获取位置

二、获取定位时,用户拒绝授权获取定位的:

第1步:获取用户当前的授权状态 =>

第2步:判断是未同意授权位置时,引导用户打开设置界面,重新选择授权功能 =>

第3步:用户选择允许授权后

第4步:重新获取位置,得到位置信息

第3步:用户选择不允许授权后

第4步:可至第1步,继续重新获取位置

引用文件可多页面复用的处理逻辑代码

引用文件:

javascript 复制代码
import { doGetLocation } from '@/utils/getLocation.js';

需要获取位置代码处执行:

javascript 复制代码
doGetLocation((data)=>{
	console.log(data);
})

getLocation.js:

javascript 复制代码
// 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);
			// 根据位置数据更新页面数据
		}
	});
}

直接在页面中处理逻辑代码

需要获取位置代码处执行:

javascript 复制代码
this.doGetLocation();

methods中处理方法:

javascript 复制代码
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

相关推荐
ganlanA1 小时前
uniapp+vue 前端防多次点击表单,防误触多次请求方法。
前端·vue.js·uni-app
爱吃鱼的酱酱仔2 小时前
uniapp实现APP、小程序与webview页面间通讯
小程序·uni-app
贾宝玉的玉宝贾8 小时前
FreeSWITCH 简单图形化界面38 - 使用uniapp中使用JsSIP进行音视频呼叫
uni-app·音视频·voip·freeswitch·ippbx·jssip
xfxTab10 小时前
uniapp中Nvue白屏问题 ReferenceError: require is not defined
uni-app
于慨20 小时前
uniapp打包h5应用如何开启history模式,以及资源管理器直接打开存在问题
uni-app
姥姥家的饭1 天前
uniapp 文本转语音
uni-app
素**颜1 天前
uniapp 基于xgplayer(西瓜视频) + renderjs开发,实现APP视频播放
javascript·uni-app·音视频
顽疲1 天前
从零用java实现 小红书 springboot vue uniapp (6)用户登录鉴权及发布笔记
java·vue.js·spring boot·uni-app
竣子好逑1 天前
uniapp 微信小程序 数据空白展示组件
微信小程序·小程序·uni-app
孙 悟 空2 天前
uni-app:监听页面返回,禁用返回操作
前端·javascript·uni-app