前言
前提：該實例是使用uniapp的小程序 實現(xiàn)的
文章描述：
這里要實現(xiàn)的功能是：
1、點擊頁面中的一個按鈕
2、判斷用戶是否授權(quán)位置信息
3、未授權(quán)–>彈出位置授權(quán)框；已授權(quán)–>進入下一個頁面（地址選擇頁）；
4、彈出位置授權(quán)框后，是否同意授權(quán)
5、同意：得到地址；不同意：–>進入下一個頁面（地址選擇頁）
6、用戶不同意位置授權(quán)的前提下，用戶第二次進入小程序點擊這個按鈕：彈窗提示用戶是否開啟位置訪問
7、同意：跳轉(zhuǎn)找設(shè)置用戶開啟允許訪問設(shè)置
8、不同意：–>進入下一個頁面（地址選擇頁）
結(jié)果：得到用戶當前位置或用戶進入地址選擇頁選擇需要的位置
一、創(chuàng)建點擊事件的方法
在pages/home/home.vue編寫此代碼創(chuàng)建點擊事件isdingwei(),
<template>
<view class="location">
<!-- 定位 -->
<view class="location-view" @click="isdingwei()">
<text class="location-text">{{city}}</text>
</view>
<!-- end -->
</view>
</template>
<script>
export default {
data() {
return {
city: '深圳市'
}
},
methods:{
isdingwei(){
//點擊事件的方法
}
}
}
</script>
二、判斷用戶是否授權(quán)位置
考慮到在項目中我們可能不止一次地方用到或者方便修改等問題，
1、項目下創(chuàng)建了新的目錄存放（utils/indes.js），如圖：
2、在utils/indes.js寫一個判斷用不是否授權(quán)位置的方法authorizedLocation()：
export function authorizedLocation(){
return new Promise((resolve,reject)=>{
uni.getSetting({
success:(res)=>{
// res.authSetting['scope.userLocation'] === undefined 表示 初始化進入，從未授權(quán)
// res.authSetting['scope.userLocation'] === true 表示 已授權(quán)
// res.authSetting['scope.userLocation'] === false 表示 授權(quán)拒絕
if( res.authSetting['scope.userLocation'] === undefined){
console.log("彈出位置授權(quán)框")
}else if(res.authSetting['scope.userLocation'] === true){
console.log("已經(jīng)授權(quán)")
}else if(res.authSetting['scope.userLocation'] === false){
console.log("彈出允許授權(quán)設(shè)置框")
}
}
})
})
}
3、在項目中引入，并使用：
<script>
//引入
import {authorizedLocation} from '../../../utils/index.js'
export default {
data() {
return {
city: '深圳市'
}
},
methods:{
isdingwei(){
// 判斷是否授權(quán)
authorizedLocation()
}
}
}
</script>
在控制臺可以看到我們的結(jié)果可以看到我們是沒有授權(quán)過的
三、彈出位置授權(quán)框
1、在（utils/indes.js）下在定義一個方法getLocation()獲取用戶位置信息：
// 獲取用戶當前位置
export function getLocation(){
return new Promise((resolve,reject)=>{
uni.getLocation({
type: 'wgs84',
success:(res)=>{
resolve(res)
console.log(res)
console.log('當前位置的經(jīng)度：' + res.longitude);
console.log('當前位置的緯度：' + res.latitude);
},
fail:(err)=>{
reject(err)
console.log(err)
}
})
})
}
2、在authorizedLocation()方法中調(diào)用，如圖：
在方法里面的第一個判斷條件里添加代碼段：
if( res.authSetting['scope.userLocation'] === undefined){
// console.log("彈出位置授權(quán)框")
getLocation()
.then((res)=>{
// 授權(quán)位置成功
resolve(res)
})
.catch((err)=>{
// 授權(quán)位置失敗
reject(err)
uni.showToast({
title: '授權(quán)位置失敗',
icon: 'none',
duration: 3000
})
})
}
前提：res.authSetting[‘scope.userLocation’] === undefined 表示 初始化進入，從未授權(quán)。結(jié)果：
1、點擊按鈕–>彈出授權(quán)框
2、–>同意
3、–>不同意
四、坐標到坐標所在位置的文字描述的轉(zhuǎn)換（逆地址解析）
用戶授權(quán)成功后，就得了用戶位置的經(jīng)緯度，通過經(jīng)緯度轉(zhuǎn)換成文字描述，同樣我們把實現(xiàn)方法先封裝到pages/utils/index.js 下：
1、逆地址解析需要用到地圖的AIP，所以移步到騰訊地圖做好準備工作，我覺得跟著官方文檔做就好了，不過也會有一些坑，我把我遇到的寫上：
1、第一、第二、第四步驟跟著官方文檔走就好了
2、第三步，下載好了放到自己的文檔的目錄下我放在了、/libs的目錄下，如圖：
3、申請?zhí)柕腒ey：放到項目里（我放在了、config/indes.js），最好放在全局這樣修改起來方便，引入看下面
4、第五步驟中我的項目是vue3，不能個官方文檔那樣引入
// 騰訊地圖秘鑰引入
import * as KEY from '../config';
import QQMapWX from '../libs/qqmap-wx-jssdk.js';
const qqmapsdk = new QQMapWX({
key: KEY.MAP_KEY
})
在看看官方文檔的逆地址解析，定義reverseGeocoder (location)函數(shù)實現(xiàn)轉(zhuǎn)換：
// 逆地址解析（坐標轉(zhuǎn)具體位置信息）
// location:參數(shù)為經(jīng)緯度{longitude, latitude}
// get_poi：是否返回周邊POI列表：1.返回；0不返回(默認)
// poi_options：用于控制Poi列表
export function reverseGeocoder (location) {
return new Promise((resolve, reject) => {
qqmapsdk.reverseGeocoder({
location: location,
get_poi: 1,
poi_options: 'policy=1;page_size=20;page_index=1',
success: res => {
resolve(res)
},
fail: err => {
reject(err)
uni.showToast({
title: err.message,
icon: 'none',
duration: 3000
})
}
})
})
}
5、回到pages/home/home.vue 。在引入上添加 reverseGeocoder，定義getLocationInfo(location)方法調(diào)用 reverseGeocoder()
import {authorizedLocation,reverseGeocoder} from '../../../utils/index.js'
// 根據(jù)經(jīng)緯度得到位置信息
getLocationInfo(location){
// console.log("進來沒")
reverseGeocoder(location)
.then((res) => {
console.log('當前位置信息：', res)
//獲取所在的城市
this.city = res.result.ad_info.city
})
.catch((err) =>{
})
},
// end
1、在isdingwei()里面調(diào)用getLocationInfo(location)：
isdingwei(){
// 判斷是否授權(quán)
authorizedLocation()
.then((res)=>{
// 已授權(quán)
// console.log("res里面有什么?。。?,res)
const latitude = res.latitude;
const longitude = res.longitude;
let location = { longitude, latitude }
// 根據(jù)經(jīng)緯度得到位置信息
this.getLocationInfo(location)
})
.catch(()=>{
})
},
6、已授權(quán)位置直接進入下一個頁面，在isdingwei()添加代碼段：
isdingwei(){
// 判斷是否授權(quán)
authorizedLocation()
.then((res)=>{
// 第一次授權(quán)
if(res.errMsg==="getLocation:ok"){
console.log("res里面有什么?。?！",res)
const latitude = res.latitude;
const longitude = res.longitude;
let location = { longitude, latitude }
// 根據(jù)經(jīng)緯度得到位置信息
this.getLocationInfo(location)
}else if(res.errMsg==="getSetting:ok"){
//已授權(quán)
uni.navigateTo({
url: '../../../../citylist/citylist'
})
}
})
.catch(()=>{
})
},
在 authorizedLocation()函數(shù)中判斷為已授權(quán)哪里加上resolve(res)：
五、拒接授權(quán)后再次點擊按鈕跳轉(zhuǎn)到允許訪問位置設(shè)置
在utils/index.js目錄下的authorizedLocation()函數(shù)中添加如下代碼段
在（else if(res.authSetting[‘scope.userLocation’] === false){ … }）{}里面加
// console.log("彈出允許授權(quán)設(shè)置框")
uni.showModal({
title: '提示',
content: '是否允許授權(quán)位置信息',
confirmText: '去設(shè)置',
success:(res)=>{
if(res.confirm){
uni.openSetting({
success:(res)=> {
if (res.authSetting['scope.userLocation']) {
resolve(res)
} else {
reject(res)
uni.showToast({
title: '授權(quán)失敗',
icon: 'none',
duration: 3000
})
}
},
fail: (err) => {
reject(err)
uni.showToast({
title: '打開設(shè)置異常',
icon: 'none',
duration: 3000
})
}
})
}else {
reject(res)
console.log("asjfs 卡號的")
console.log(res)
}
},
fail: err => {
reject(err)
uni.showToast({
title: '彈窗異常',
icon: 'none',
duration: 3000
})
}
})
在pages/home/home.vue中 isdingwei()方法中添加代碼段：
.catch((err)=>{
if(err.errMsg==="showModal:ok" && err.confirm==false){
uni.navigateTo({
url: '../../../../citylist/citylist'
})
}
})
完成啦！?。?！文章來源：http://www.zghlxwxcb.cn/news/detail-482385.html
總結(jié)
以上就是今天學(xué)習(xí)到的一些內(nèi)容，本文僅僅自己的學(xué)習(xí)過程的記錄，可能有些寫的不好的地方，也不夠優(yōu)雅，只是簡單的把功能實現(xiàn)了，各位大佬看到有什么不對的地方還望指正，和我一樣的新手有什么不懂的地方也可以一起討論。文章來源地址http://www.zghlxwxcb.cn/news/detail-482385.html
到了這里，關(guān)于uniapp微信小程序：點擊按鈕先判斷用戶是否授權(quán)位置信息、用戶位置信息授權(quán)、進入下一個頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
