快捷導(dǎo)航

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

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

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

在微信小程序中，獲取定位，是需要用戶授權(quán)的，那么當(dāng)用戶拒絕授權(quán)后，需要重新獲取定位時(shí)，是不會(huì)再調(diào)起授權(quán)界面，這時(shí)需要用戶主動(dòng)打開設(shè)置界面，才可以重新開啟授權(quán)權(quán)限；

那么，在uniapp中獲取位置信息處理，要兼容用戶同意授權(quán)、拒絕授權(quán)情況下，最終能成功獲取到位置信息的，做以下處理：

處理邏輯

一、獲取定位時(shí)，用戶同意授權(quán)獲取定位，得到位置信息；

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

二、獲取定位時(shí)，用戶拒絕授權(quán)獲取定位的：

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

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

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

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

引用文件：

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

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

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

getLocation.js：

// import { doGetLocation } from '@/utils/getLocation.js';
let isOpenSetting;
/**
 * 獲取定位，兼容用戶拒絕授權(quán)及相關(guān)處理（獲取用戶當(dāng)前的授權(quán)狀態(tài) => 未同意授權(quán)位置時(shí)，引導(dǎo)用戶打開設(shè)置界面，重新選擇授權(quán)功能 => 允許后重新獲取位置）
 */
export function doGetLocation(callback){
	isOpenSetting = false; // 是否打開設(shè)置界面
	// 獲取用戶當(dāng)前的授權(quán)狀態(tài)
	uni.getSetting({
		success: (settingRes) => {
			console.log(settingRes)
			console.log(isOpenSetting)
			// 判斷用戶未同意授權(quán)位置時(shí)，提示并引導(dǎo)用戶去打開設(shè)置界面，用戶可重新選擇授權(quán)功能
			if (!isOpenSetting && typeof(settingRes.authSetting['scope.userLocation']) != 'undefined' && !settingRes.authSetting['scope.userLocation']) {
				uni.showModal({
					title: '需要授權(quán)獲取您的位置信息',
					content: '你的位置信息將用于為您提供更合適您的服務(wù)',
					success: (data) => {
						if (data.confirm) {
							isOpenSetting = true;
							// 打開設(shè)置界面
							uni.openSetting({
								success: (response) => {
									if(response.authSetting['scope.userLocation']){
										console.log('重新授權(quán)獲取位置信息-同意');
										// 重新獲取定位
										getLocation((data)=>{
											callback({
												isOpenSetting:isOpenSetting,
												...data
											})
										});
									}else{
										console.log('重新授權(quán)獲取位置信息-未同意');
										callback({
											isOpenSetting:isOpenSetting,
											latitude : '',
											longitude : '',
										})
									}
								},
								fail:()=>{
									console.log('openSetting接口調(diào)用失敗的回調(diào)函數(shù)');
								}
							})
						} else if (data.cancel) {
							console.log('showModal接口：用戶點(diǎn)擊取消未打開設(shè)置界面');
							callback({
								isOpenSetting:isOpenSetting,
								latitude : '',
								longitude : '',
							})
						}
					},
					fail: function(){
						console.log('showModal接口：調(diào)用失敗的回調(diào)函數(shù)');
					}
				});
			}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('用戶拒絕授權(quán)獲取位置信息,使用默認(rèn)經(jīng)緯度0 0');
			callback({
				latitude : '',
				longitude : '',
			})
		},complete: (res)=>{
			// console.log(res);
			// 根據(jù)位置數(shù)據(jù)更新頁面數(shù)據(jù)
		}
	});
}

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

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

this.doGetLocation();

methods中處理方法：

methods: {
	// ......
	// 獲取定位，兼容用戶拒絕授權(quán)及相關(guān)處理（獲取用戶當(dāng)前的授權(quán)狀態(tài) => 未同意授權(quán)位置時(shí)，引導(dǎo)用戶打開設(shè)置界面，重新選擇授權(quán)功能 => 允許后重新獲取位置）
	doGetLocation(){
		this.isOpenSetting = false; // 是否打開設(shè)置界面
		// 獲取用戶當(dāng)前的授權(quán)狀態(tài)
		uni.getSetting({
			success: (settingRes) => {
				console.log(settingRes)
				console.log(this.isOpenSetting)
				// 判斷用戶未同意授權(quán)位置時(shí)，提示并引導(dǎo)用戶去打開設(shè)置界面，用戶可重新選擇授權(quán)功能
				if (!this.isOpenSetting && typeof(settingRes.authSetting['scope.userLocation']) != 'undefined' && !settingRes.authSetting['scope.userLocation']) {
					uni.showModal({
						title: '需要授權(quán)獲取您的位置信息',
						content: '你的位置信息將用于為您提供更合適您的服務(wù)',
						success: (data) => {
							if (data.confirm) {
								this.isOpenSetting = true;
								// 打開設(shè)置界面
								uni.openSetting({
									success: (response) => {
										if(response.authSetting['scope.userLocation']){
											console.log('重新授權(quán)獲取位置信息-同意');
											// 重新獲取定位
											this.getLocation();
										}else{
											console.log('重新授權(quán)獲取位置信息-未同意');
											this.doGetLocationAfter({
												latitude : '',
												longitude : '',
												isOpenSetting : this.isOpenSetting,
											})
										}
									},
									fail:()=>{
										console.log('openSetting接口調(diào)用失敗的回調(diào)函數(shù)');
									}
								})
							} else if (data.cancel) {
								console.log('showModal接口：用戶點(diǎn)擊取消未打開設(shè)置界面');
								this.doGetLocationAfter({
									latitude : '',
									longitude : '',
									isOpenSetting : this.isOpenSetting,
								})
							}
						},
						fail: function(){
							console.log('showModal接口：調(diào)用失敗的回調(diào)函數(shù)');
						}
					});
				}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('用戶拒絕授權(quán)獲取位置信息,使用默認(rèn)經(jīng)緯度0 0');
				this.doGetLocationAfter({
					latitude : '',
					longitude : '',
					isOpenSetting : this.isOpenSetting,
				})
				// 根據(jù)位置數(shù)據(jù)更新頁面數(shù)據(jù)
			},complete: (res)=>{
				// console.log(res);
				// 根據(jù)位置數(shù)據(jù)更新頁面數(shù)據(jù)
			}
		});
	},
	// 最終獲取到的信息數(shù)據(jù)
	doGetLocationAfter(data){
		console.log(data)
		if(data.latitude != this.latitude || data.longitude != this.longitude){
			this.latitude = data.latitude;
			this.longitude = data.longitude;
			// 根據(jù)位置數(shù)據(jù)更新頁面數(shù)據(jù)
		}else{
			console.log('位置信息無變化');
		}
		// 在這里處理最終獲取到的信息數(shù)據(jù)
	},
	// ......
}