当前位置:   article > 正文

uniapp中获取位置信息处理_uniapp获取位置信息

uniapp获取位置信息

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

那么,在uniapp中获取位置信息处理,要兼容用户同意授权、拒绝授权情况下,最终能成功获取到位置信息的,做以下处理:

处理逻辑

一、获取定位时,用户同意授权获取定位,得到位置信息;


第1步:获取用户当前的授权状态 =>
第2步:判断是同意授权位置时 =>
第3步:获取位置

二、获取定位时,用户拒绝授权获取定位的:


第1步:获取用户当前的授权状态 =>
第2步:判断是未同意授权位置时,引导用户打开设置界面,重新选择授权功能 =>

第3步:用户选择允许授权后
第4步:重新获取位置,得到位置信息

第3步:用户选择不允许授权后
第4步:可至第1步,继续重新获取位置


引用文件可多页面复用的处理逻辑代码

引用文件:

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

需要获取位置代码处执行:

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

getLocation.js:

  1. // import { doGetLocation } from '@/utils/getLocation.js';
  2. let isOpenSetting;
  3. /**
  4. * 获取定位,兼容用户拒绝授权及相关处理(获取用户当前的授权状态 => 未同意授权位置时,引导用户打开设置界面,重新选择授权功能 => 允许后重新获取位置)
  5. */
  6. export function doGetLocation(callback){
  7. isOpenSetting = false; // 是否打开设置界面
  8. // 获取用户当前的授权状态
  9. uni.getSetting({
  10. success: (settingRes) => {
  11. console.log(settingRes)
  12. console.log(isOpenSetting)
  13. // 判断用户未同意授权位置时,提示并引导用户去打开设置界面,用户可重新选择授权功能
  14. if (!isOpenSetting && typeof(settingRes.authSetting['scope.userLocation']) != 'undefined' && !settingRes.authSetting['scope.userLocation']) {
  15. uni.showModal({
  16. title: '需要授权获取您的位置信息',
  17. content: '你的位置信息将用于为您提供更合适您的服务',
  18. success: (data) => {
  19. if (data.confirm) {
  20. isOpenSetting = true;
  21. // 打开设置界面
  22. uni.openSetting({
  23. success: (response) => {
  24. if(response.authSetting['scope.userLocation']){
  25. console.log('重新授权获取位置信息-同意');
  26. // 重新获取定位
  27. getLocation((data)=>{
  28. callback({
  29. isOpenSetting:isOpenSetting,
  30. ...data
  31. })
  32. });
  33. }else{
  34. console.log('重新授权获取位置信息-未同意');
  35. callback({
  36. isOpenSetting:isOpenSetting,
  37. latitude : '',
  38. longitude : '',
  39. })
  40. }
  41. },
  42. fail:()=>{
  43. console.log('openSetting接口调用失败的回调函数');
  44. }
  45. })
  46. } else if (data.cancel) {
  47. console.log('showModal接口:用户点击取消未打开设置界面');
  48. callback({
  49. isOpenSetting:isOpenSetting,
  50. latitude : '',
  51. longitude : '',
  52. })
  53. }
  54. },
  55. fail: function(){
  56. console.log('showModal接口:调用失败的回调函数');
  57. }
  58. });
  59. }else{
  60. // 重新获取定位
  61. getLocation((data)=>{
  62. callback({
  63. isOpenSetting:isOpenSetting,
  64. ...data
  65. })
  66. });
  67. }
  68. }
  69. })
  70. }
  71. /**
  72. * 获取位置
  73. */
  74. export function getLocation(callback){
  75. uni.getLocation({
  76. //type: 'wgs84',
  77. type: 'gcj02',
  78. success: (res)=>{
  79. console.log(res);
  80. callback({
  81. latitude : res.latitude,
  82. longitude : res.longitude,
  83. })
  84. },
  85. fail: (res)=>{
  86. console.log('用户拒绝授权获取位置信息,使用默认经纬度0 0');
  87. callback({
  88. latitude : '',
  89. longitude : '',
  90. })
  91. },complete: (res)=>{
  92. // console.log(res);
  93. // 根据位置数据更新页面数据
  94. }
  95. });
  96. }

直接在页面中处理逻辑代码

需要获取位置代码处执行:

this.doGetLocation();

methods中处理方法:

  1. methods: {
  2. // ......
  3. // 获取定位,兼容用户拒绝授权及相关处理(获取用户当前的授权状态 => 未同意授权位置时,引导用户打开设置界面,重新选择授权功能 => 允许后重新获取位置)
  4. doGetLocation(){
  5. this.isOpenSetting = false; // 是否打开设置界面
  6. // 获取用户当前的授权状态
  7. uni.getSetting({
  8. success: (settingRes) => {
  9. console.log(settingRes)
  10. console.log(this.isOpenSetting)
  11. // 判断用户未同意授权位置时,提示并引导用户去打开设置界面,用户可重新选择授权功能
  12. if (!this.isOpenSetting && typeof(settingRes.authSetting['scope.userLocation']) != 'undefined' && !settingRes.authSetting['scope.userLocation']) {
  13. uni.showModal({
  14. title: '需要授权获取您的位置信息',
  15. content: '你的位置信息将用于为您提供更合适您的服务',
  16. success: (data) => {
  17. if (data.confirm) {
  18. this.isOpenSetting = true;
  19. // 打开设置界面
  20. uni.openSetting({
  21. success: (response) => {
  22. if(response.authSetting['scope.userLocation']){
  23. console.log('重新授权获取位置信息-同意');
  24. // 重新获取定位
  25. this.getLocation();
  26. }else{
  27. console.log('重新授权获取位置信息-未同意');
  28. this.doGetLocationAfter({
  29. latitude : '',
  30. longitude : '',
  31. isOpenSetting : this.isOpenSetting,
  32. })
  33. }
  34. },
  35. fail:()=>{
  36. console.log('openSetting接口调用失败的回调函数');
  37. }
  38. })
  39. } else if (data.cancel) {
  40. console.log('showModal接口:用户点击取消未打开设置界面');
  41. this.doGetLocationAfter({
  42. latitude : '',
  43. longitude : '',
  44. isOpenSetting : this.isOpenSetting,
  45. })
  46. }
  47. },
  48. fail: function(){
  49. console.log('showModal接口:调用失败的回调函数');
  50. }
  51. });
  52. }else{
  53. // 重新获取定位
  54. this.getLocation();
  55. }
  56. }
  57. })
  58. },
  59. // 获取位置
  60. getLocation(){
  61. uni.getLocation({
  62. //type: 'wgs84',
  63. type: 'gcj02',
  64. success: (res)=>{
  65. console.log(res);
  66. this.doGetLocationAfter({
  67. latitude : res.latitude,
  68. longitude : res.longitude,
  69. isOpenSetting : this.isOpenSetting,
  70. })
  71. },
  72. fail: (res)=>{
  73. console.log('用户拒绝授权获取位置信息,使用默认经纬度0 0');
  74. this.doGetLocationAfter({
  75. latitude : '',
  76. longitude : '',
  77. isOpenSetting : this.isOpenSetting,
  78. })
  79. // 根据位置数据更新页面数据
  80. },complete: (res)=>{
  81. // console.log(res);
  82. // 根据位置数据更新页面数据
  83. }
  84. });
  85. },
  86. // 最终获取到的信息数据
  87. doGetLocationAfter(data){
  88. console.log(data)
  89. if(data.latitude != this.latitude || data.longitude != this.longitude){
  90. this.latitude = data.latitude;
  91. this.longitude = data.longitude;
  92. // 根据位置数据更新页面数据
  93. }else{
  94. console.log('位置信息无变化');
  95. }
  96. // 在这里处理最终获取到的信息数据
  97. },
  98. // ......
  99. }

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

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号