uniapp中获取位置信息处理步骤
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
在微信小程序中,获取定位,是需要用户授权的,那么当用户拒绝授权后,需要重新获取定位时,是不会再调起授权界面,这时需要用户主动打开设置界面,才可以重新开启授权权限;
那么,在uniapp中获取位置信息处理,要兼容用户同意授权、拒绝授权情况下,最终能成功获取到位置信息的,做以下处理:
处理逻辑
一、获取定位时,用户同意授权获取定位,得到位置信息;
第1步:获取用户当前的授权状态 =>
第2步:判断是同意授权位置时 =>
第3步:获取位置
二、获取定位时,用户拒绝授权获取定位的:
第1步:获取用户当前的授权状态 =>
第2步:判断是未同意授权位置时,引导用户打开设置界面,重新选择授权功能 =>
第3步:用户选择允许授权后
第4步:重新获取位置,得到位置信息
第3步:用户选择不允许授权后
第4步:可至第1步,继续重新获取位置
引用文件可多页面复用的处理逻辑代码
引用文件:
需要获取位置代码处执行:
getLocation.js:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 | // 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); // 根据位置数据更新页面数据 } }); } |
直接在页面中处理逻辑代码
需要获取位置代码处执行:
methods中处理方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | 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中获取位置信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
这篇文章主要介绍了仿微信(电话)联系人列表滑动字母索引实例,通过for循环进行判断,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。2017-08-08
最新评论