uniapp中获取位置信息处理步骤

 更新时间:2024年02月29日 11:16:34   作者:羽筠  
在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中获取位置信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js鼠标点击图片实现随机变换图片的方法

    js鼠标点击图片实现随机变换图片的方法

    这篇文章主要介绍了js鼠标点击图片实现随机变换图片的方法,涉及鼠标事件与随机函数的使用技巧,需要的朋友可以参考下
    2015-02-02
  • PhotoShop给图片自动添加边框及EXIF信息的JS脚本

    PhotoShop给图片自动添加边框及EXIF信息的JS脚本

    这篇文章主要介绍了PhotoShop给图片自动添加边框及EXIF信息的JS脚本,本文给出效果图和实现代码,需要的朋友可以参考下
    2015-02-02
  • 一文看懂如何简单实现节流函数和防抖函数

    一文看懂如何简单实现节流函数和防抖函数

    这篇文章主要给大家介绍了如何通过一文看懂简单实现节流函数和防抖函数的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • js 实现watch监听数据变化的代码

    js 实现watch监听数据变化的代码

    这篇文章主要介绍了js 实现watch监听数据变化的代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • require.js配合插件text.js实现最简单的单页应用程序

    require.js配合插件text.js实现最简单的单页应用程序

    这篇文章主要介绍了require.js配合插件text.js实现最简单的单页应用程序,需要的朋友可以参考下
    2016-07-07
  • 详解vscode中console.log的两种快速写法

    详解vscode中console.log的两种快速写法

    这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-11-11
  • element-plus默认菜单打开步骤

    element-plus默认菜单打开步骤

    在 Vue 3 中使用 Element Plus 的 <el-menu> 组件时,默认情况下菜单项是关闭状态的,如果你想让某个菜单项默认处于展开状态,你可以通过设置菜单项的 default-active 属性来实现,这篇文章主要介绍了element-plus默认菜单打开,需要的朋友可以参考下
    2024-08-08
  • BootStrap的JS插件之轮播效果案例详解

    BootStrap的JS插件之轮播效果案例详解

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。这篇文章主要介绍了BootStrap的JS插件之轮播效果案例详解的相关资料,需要的朋友可以参考下
    2016-05-05
  • Js中使用hasOwnProperty方法检索ajax响应对象的例子

    Js中使用hasOwnProperty方法检索ajax响应对象的例子

    这篇文章主要介绍了Js中使用hasOwnProperty方法检索ajax响应对象的例子,本文介绍的技巧就是hasOwnProperty方法在ajax请求中的使用,需要的朋友可以参考下
    2014-12-12
  • JavaScript中数据过滤的几种常见方法

    JavaScript中数据过滤的几种常见方法

    JavaScript是一种广泛使用的编程语言,它提供了多种方法来对数据进行过滤,在本文中,我们将介绍JavaScript中常见的几种数据过滤方法,并提供相应的示例,感兴趣的朋友跟随小编一起看看吧
    2023-10-10

最新评论