uniapp中獲取位置信息處理步驟

更新時間：2024年02月29日 11:16:34 作者：羽筠

在uniapp中獲取位置信息處理,要兼容用戶同意授權、拒絕授權情況下,最終能成功獲取到位置信息的,本文給大家介紹uniapp中獲取位置信息處理步驟,感興趣的朋友跟隨小編一起看看吧

處理邏輯

一、獲取定位時，用戶同意授權獲取定位，得到位置信息；

第1步：獲取用戶當前的授權狀態(tài) =>
第2步：判斷是同意授權位置時 =>
第3步：獲取位置

二、獲取定位時，用戶拒絕授權獲取定位的：

第1步：獲取用戶當前的授權狀態(tài) =>
第2步：判斷是未同意授權位置時，引導用戶打開設置界面，重新選擇授權功能 =>

第3步：用戶選擇允許授權后
第4步：重新獲取位置，得到位置信息

第3步：用戶選擇不允許授權后
第4步：可至第1步，繼續(xù)重新獲取位置

引用文件可多頁面復用的處理邏輯代碼

引用文件：

import { doGetLocation } from '@/utils/getLocation.js';

需要獲取位置代碼處執(zhí)行：

doGetLocation((data)=>{
	console.log(data);
})

getLocation.js：

// import { doGetLocation } from '@/utils/getLocation.js';
let isOpenSetting;
/**
 * 獲取定位，兼容用戶拒絕授權及相關處理（獲取用戶當前的授權狀態(tài) => 未同意授權位置時，引導用戶打開設置界面，重新選擇授權功能 => 允許后重新獲取位置）
 */
export function doGetLocation(callback){
	isOpenSetting = false; // 是否打開設置界面
	// 獲取用戶當前的授權狀態(tài)
	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);
			// 根據位置數據更新頁面數據
		}
	});
}

直接在頁面中處理邏輯代碼

需要獲取位置代碼處執(zhí)行：

this.doGetLocation();

methods中處理方法：

methods: {
	// ......
	// 獲取定位，兼容用戶拒絕授權及相關處理（獲取用戶當前的授權狀態(tài) => 未同意授權位置時，引導用戶打開設置界面，重新選擇授權功能 => 允許后重新獲取位置）
	doGetLocation(){
		this.isOpenSetting = false; // 是否打開設置界面
		// 獲取用戶當前的授權狀態(tài)
		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('位置信息無變化');
		}
		// 在這里處理最終獲取到的信息數據
	},
	// ......
}