uniapp中獲取位置信息處理步驟
更新時間：2024年02月29日 11:16:34 作者：羽筠
在uniapp中獲取位置信息處理,要兼容用戶同意授權、拒絕授權情況下,最終能成功獲取到位置信息的,本文給大家介紹uniapp中獲取位置信息處理步驟,感興趣的朋友跟隨小編一起看看吧
在微信小程序中，獲取定位，是需要用戶授權的，那么當用戶拒絕授權后，需要重新獲取定位時，是不會再調(diào)起授權界面，這時需要用戶主動打開設置界面，才可以重新開啟授權權限；
那么，在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接口調(diào)用失敗的回調(diào)函數(shù)');
}
})
} else if (data.cancel) {
console.log('showModal接口：用戶點擊取消未打開設置界面');
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('用戶拒絕授權獲取位置信息,使用默認經(jīng)緯度0 0');
callback({
latitude : '',
longitude : '',
})
},complete: (res)=>{
// console.log(res);
// 根據(jù)位置數(shù)據(jù)更新頁面數(shù)據(jù)
}
});
}直接在頁面中處理邏輯代碼
需要獲取位置代碼處執(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接口調(diào)用失敗的回調(diào)函數(shù)');
}
})
} else if (data.cancel) {
console.log('showModal接口：用戶點擊取消未打開設置界面');
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('用戶拒絕授權獲取位置信息,使用默認經(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ù)
},
// ......
}uniapp API文檔
獲取定位：
uni.getLocation(OBJECT) 獲取當前的地理位置、速度
https://uniapp.dcloud.net.cn/api/location/location.html#getlocation
獲取用戶當前的授權狀態(tài)：
uni.getSetting(OBJECT) 獲取用戶的當前設置。
https://uniapp.dcloud.net.cn/api/other/setting.html#getsetting
打開設置界面：
uni.openSetting(OBJECT) 調(diào)起客戶端小程序設置界面，返回用戶設置的操作結果。
https://uniapp.dcloud.net.cn/api/other/setting.html#opensetting
到此這篇關于uniapp中獲取位置信息處理的文章就介紹到這了,更多相關uniapp中獲取位置信息內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了js鼠標點擊圖片實現(xiàn)隨機變換圖片的方法,涉及鼠標事件與隨機函數(shù)的使用技巧,需要的朋友可以參考下2015-02-02
PhotoShop給圖片自動添加邊框及EXIF信息的JS腳本
這篇文章主要介紹了PhotoShop給圖片自動添加邊框及EXIF信息的JS腳本,本文給出效果圖和實現(xiàn)代碼,需要的朋友可以參考下2015-02-02
一文看懂如何簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)
這篇文章主要給大家介紹了如何通過一文看懂簡單實現(xiàn)節(jié)流函數(shù)和防抖函數(shù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-09-09
js 實現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼
這篇文章主要介紹了js 實現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
require.js配合插件text.js實現(xiàn)最簡單的單頁應用程序
這篇文章主要介紹了require.js配合插件text.js實現(xiàn)最簡單的單頁應用程序,需要的朋友可以參考下2016-07-07
這篇文章主要介紹了vscode中console.log的兩種快速寫法,每種方法通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
在 Vue 3 中使用 Element Plus 的 <el-menu> 組件時,默認情況下菜單項是關閉狀態(tài)的,如果你想讓某個菜單項默認處于展開狀態(tài),你可以通過設置菜單項的 default-active 屬性來實現(xiàn),這篇文章主要介紹了element-plus默認菜單打開,需要的朋友可以參考下2024-08-08
Bootstrap 是一個用于快速開發(fā) Web 應用程序和網(wǎng)站的前端框架。這篇文章主要介紹了BootStrap的JS插件之輪播效果案例詳解的相關資料,需要的朋友可以參考下2016-05-05
Js中使用hasOwnProperty方法檢索ajax響應對象的例子
這篇文章主要介紹了Js中使用hasOwnProperty方法檢索ajax響應對象的例子,本文介紹的技巧就是hasOwnProperty方法在ajax請求中的使用,需要的朋友可以參考下2014-12-12
JavaScript中數(shù)據(jù)過濾的幾種常見方法
JavaScript是一種廣泛使用的編程語言,它提供了多種方法來對數(shù)據(jù)進行過濾,在本文中,我們將介紹JavaScript中常見的幾種數(shù)據(jù)過濾方法,并提供相應的示例,感興趣的朋友跟隨小編一起看看吧2023-10-10