uniapp中获取位置信息处理

羽筠

已于 2024-03-01 12:38:58 修改

阅读量3.6k

点赞数 10

分类专栏：小程序 JS 微信项目文章标签： uni-app

于 2024-02-28 17:55:00 首次发布

本文链接：https://blog.csdn.net/qq_16494241/article/details/136352232

版权

JS 同时被 3 个专栏收录

72 篇文章 0 订阅

订阅专栏

小程序

20 篇文章 1 订阅

订阅专栏

微信项目

15 篇文章 0 订阅

订阅专栏

本文介绍了在微信小程序和uniapp中处理用户位置信息获取的逻辑，包括用户授权同意和拒绝的情况，如何引导用户重新授权以及使用uniapi进行定位操作的兼容性处理。

摘要由CSDN通过智能技术生成

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

那么，在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('位置信息无变化');
		}
		// 在这里处理最终获取到的信息数据
	},
	// ......
}