前言
前提：该实例是使用uniapp的小程序 实现的
文章描述：
这里要实现的功能是：
1、点击页面中的一个按钮
2、判断用户是否授权位置信息
3、未授权–>弹出位置授权框；已授权–>进入下一个页面（地址选择页）；
4、弹出位置授权框后，是否同意授权
5、同意：得到地址；不同意：–>进入下一个页面（地址选择页）
6、用户不同意位置授权的前提下，用户第二次进入小程序点击这个按钮：弹窗提示用户是否开启位置访问
7、同意：跳转找设置用户开启允许访问设置
8、不同意：–>进入下一个页面（地址选择页）
结果：得到用户当前位置或用户进入地址选择页选择需要的位置
一、创建点击事件的方法
在pages/home/home.vue编写此代码创建点击事件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>
二、判断用户是否授权位置
考虑到在项目中我们可能不止一次地方用到或者方便修改等问题，
1、项目下创建了新的目录存放（utils/indes.js），如图：
2、在utils/indes.js写一个判断用不是否授权位置的方法authorizedLocation()：
export function authorizedLocation(){
return new Promise((resolve,reject)=>{
uni.getSetting({
success:(res)=>{
// res.authSetting['scope.userLocation'] === undefined 表示 初始化进入，从未授权
// res.authSetting['scope.userLocation'] === true 表示 已授权
// res.authSetting['scope.userLocation'] === false 表示 授权拒绝
if( res.authSetting['scope.userLocation'] === undefined){
console.log("弹出位置授权框")
}else if(res.authSetting['scope.userLocation'] === true){
console.log("已经授权")
}else if(res.authSetting['scope.userLocation'] === false){
console.log("弹出允许授权设置框")
}
}
})
})
}
3、在项目中引入，并使用：
<script>
//引入
import {authorizedLocation} from '../../../utils/index.js'
export default {
data() {
return {
city: '深圳市'
}
},
methods:{
isdingwei(){
// 判断是否授权
authorizedLocation()
}
}
}
</script>
在控制台可以看到我们的结果可以看到我们是没有授权过的
三、弹出位置授权框
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('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
},
fail:(err)=>{
reject(err)
console.log(err)
}
})
})
}
2、在authorizedLocation()方法中调用，如图：
在方法里面的第一个判断条件里添加代码段：
if( res.authSetting['scope.userLocation'] === undefined){
// console.log("弹出位置授权框")
getLocation()
.then((res)=>{
// 授权位置成功
resolve(res)
})
.catch((err)=>{
// 授权位置失败
reject(err)
uni.showToast({
title: '授权位置失败',
icon: 'none',
duration: 3000
})
})
}
前提：res.authSetting[‘scope.userLocation’] === undefined 表示 初始化进入，从未授权。结果：
1、点击按钮–>弹出授权框
2、–>同意
3、–>不同意
四、坐标到坐标所在位置的文字描述的转换（逆地址解析）
用户授权成功后，就得了用户位置的经纬度，通过经纬度转换成文字描述，同样我们把实现方法先封装到pages/utils/index.js 下：
1、逆地址解析需要用到地图的AIP，所以移步到腾讯地图做好准备工作，我觉得跟着官方文档做就好了，不过也会有一些坑，我把我遇到的写上：
1、第一、第二、第四步骤跟着官方文档走就好了
2、第三步，下载好了放到自己的文档的目录下我放在了、/libs的目录下，如图：
3、申请号的Key：放到项目里（我放在了、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)函数实现转换：
// 逆地址解析（坐标转具体位置信息）
// location:参数为经纬度{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)方法调用 reverseGeocoder()
import {authorizedLocation,reverseGeocoder} from '../../../utils/index.js'
// 根据经纬度得到位置信息
getLocationInfo(location){
// console.log("进来没")
reverseGeocoder(location)
.then((res) => {
console.log('当前位置信息：', res)
//获取所在的城市
this.city = res.result.ad_info.city
})
.catch((err) =>{
})
},
// end
1、在isdingwei()里面调用getLocationInfo(location)：
isdingwei(){
// 判断是否授权
authorizedLocation()
.then((res)=>{
// 已授权
// console.log("res里面有什么！！！",res)
const latitude = res.latitude;
const longitude = res.longitude;
let location = { longitude, latitude }
// 根据经纬度得到位置信息
this.getLocationInfo(location)
})
.catch(()=>{
})
},
6、已授权位置直接进入下一个页面，在isdingwei()添加代码段：
isdingwei(){
// 判断是否授权
authorizedLocation()
.then((res)=>{
// 第一次授权
if(res.errMsg==="getLocation:ok"){
console.log("res里面有什么！！！",res)
const latitude = res.latitude;
const longitude = res.longitude;
let location = { longitude, latitude }
// 根据经纬度得到位置信息
this.getLocationInfo(location)
}else if(res.errMsg==="getSetting:ok"){
//已授权
uni.navigateTo({
url: '../../../../citylist/citylist'
})
}
})
.catch(()=>{
})
},
在 authorizedLocation()函数中判断为已授权哪里加上resolve(res)：
五、拒接授权后再次点击按钮跳转到允许访问位置设置
在utils/index.js目录下的authorizedLocation()函数中添加如下代码段
在（else if(res.authSetting[‘scope.userLocation’] === false){ … }）{}里面加
// console.log("弹出允许授权设置框")
uni.showModal({
title: '提示',
content: '是否允许授权位置信息',
confirmText: '去设置',
success:(res)=>{
if(res.confirm){
uni.openSetting({
success:(res)=> {
if (res.authSetting['scope.userLocation']) {
resolve(res)
} else {
reject(res)
uni.showToast({
title: '授权失败',
icon: 'none',
duration: 3000
})
}
},
fail: (err) => {
reject(err)
uni.showToast({
title: '打开设置异常',
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'
})
}
})
完成啦！！！！
总结
以上就是今天学习到的一些内容，本文仅仅自己的学习过程的记录，可能有些写的不好的地方，也不够优雅，只是简单的把功能实现了，各位大佬看到有什么不对的地方还望指正，和我一样的新手有什么不懂的地方也可以一起讨论。