微信小程序获取用户地理位置失败的原因主要有3种情况：
1. 手机系统设置中地理位置未开启2. 系统未给微信app授权3. 用户未给小程序授权地理位置信息
所以需要继续完善下定位失败的处理逻辑。
1. 在获取地理位置信息失败后，首先判断用户手机系统定位服务是否开启 || 微信app是否有定位授权，两种情况任意一种不符合，显示地理位置获取失败状态；
2. 都符合的话调用uni.getLocation，success走成功的操作，fail表示未给小程序授权地理位置信息，显示地理位置获取失败状态；uni.openSetting打开设置，选择允许小程序授权。
涉及到一个关键点是，微信小程序判断手机有没有定位的方法
uni.getSystemInfo文档
//locationEnabled 地理位置的系统开关
//locationAuthorized 允许微信使用定位的开关
uni.getSystemInfo({
success: (res) => {
if (!res.locationEnabled || !res.locationAuthorized) {
uni.showToast({
title: '请确保手机系统定位已开启',
icon: 'none',
duration: 2000,
})
},
})
获取地理位置失败显示效果图
具体代码如下：
封装tool.js
//位置授权
export function getAuthorize () {
return new Promise((resolve, reject) => {
uni.authorize({
scope: 'scope.userLocation',
success: () => {
// 1 用户允许授权
// 2 用户之前已经同意授权，则不会出现弹窗，直接返回成功
// 以上两种情况都会进入到success回调中
resolve() // 允许授权
},
fail: () => {
// 1 用户拒绝授权
// 2 用户之前拒绝了授权，此接口会直接进入失败回调
// 以上两种情况都会进入到fail回调中
reject() // 拒绝授权
},
})
})
}
父组件html
<template>
<view>
<!-- 未开启定位时状态 -->
<notGps v-if="showNoGps" />
<!-- 已开启定位时，正常显示页面 -->
<view v-else class="index_root">
<view>页面内容</view>
</view>
</view>
</template>
父组件js
<script>
import { getAuthorize } from '@/utils/tool.js' //引入位置授权
import notGps from './component/notGps.vue' // 引入未开启定位子组件
data() {
return {
showNoGps: false,
},
onLoad(e) {
uni.showLoading({
title: '加载中',
mask: true,
})
//位置授权
getAuthorize()
//用户允许小程序位置授权
.then(() => {
this.getSystemInfo()
})
//用户拒绝小程序位置授权
.catch(() => {
uni.hideLoading()
this.getSystemInfo()
})
},
onShow() {
if (this.showNoGps === true) {
this.getSystemInfo()
}
}
methods: {
//获取手机系统信息
getSystemInfo() {
uni.getSystemInfo({
success: (res) => {
// 获取地理位置失败原因
// 1.手机系统设置中地理位置未开启
// 2.系统未给微信授权
// 3.用户未给小程序授权地理位置信息
if (!res.locationEnabled || !res.locationAuthorized) {
uni.showToast({
title: '请确保手机系统定位已开启',
icon: 'none',
duration: 2000,
})
this.showNoGps = true
} else {
this.getLocation()
}
},
//先获取经纬度，然后再根据经纬度通过腾讯地图获取地址名称
getLocation() {
const that = this
uni.getLocation({
type: 'gcj02',
success(res) {
// 成功进行的操作
let longitude = res.longitude
let latitude = res.latitude
getAddress(longitude, latitude)
.then((res) => {
let params = {
city: res.result.address_component.city,
name: res.result.address_reference.landmark_l2.title,
lng: longitude,
lat: latitude,
}
that.$store.commit('setLocation', params)
// 获取定位成功，关闭获取地理位置失败显示效果
that.showNoGps = false
uni.showLoading({
title: '加载中',
mask: true,
})
//请求接口获取页面数据
that.getGoodsList()
})
.catch((e) => {
console.log(e, '解释地址失败')
})
},
fail(err) {
// 到这里进入fail就只有情况3，用户未给小程序授权地理位置信息，显示获取地理位置失败显示效果
console.log(err, '获取经纬度失败')
that.showNoGps = true
},
})
},
})
},
}
</script>
notGps组件文章来源：https://www.toymoban.com/news/detail-496506.html
<template>
<view class="openGps">
<image src="@/static/image/no_goods.png" class="empty-img"></image>
<view class="empty-txt">
为给您提供最佳服务，小程序需要获取您的当前位置以定位您附近的商户
</view>
<view class="handleBtn" @click="gotoLocation">点击开启定位</view>
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
//打开小程序授权地理位置设置，不管用户操作是否授权，返回父组件页面之后，都会触发onShow周期函数里的代码
gotoLocation() {
uni.openSetting({
success(res) {
console.log(res.authSetting)
},
})
},
},
}
</script>
<style lang="scss">
.openGps {
text-align: center;
padding: 400rpx 80rpx 0 80rpx;
}
.empty-img {
width: 380rpx;
height: 284rpx;
}
.empty-txt {
font-size: 28rpx;
color: #999;
}
.handleBtn {
background: linear-gradient(-10deg, #00ca20, #02bb34);
font-size: 20rux;
color: #fff;
font-weight: bold;
width: 300upx;
text-align: center;
height: 70upx;
line-height: 70upx;
border-radius: 35upx;
margin: 30upx auto;
}
</style>
可参考：
微信小程序拒绝定位之后 如何再次开启以及判断是否打开了系统定位功能
微信小程序获取地理位置，用户未开启手机定位时的解决方案文章来源地址https://www.toymoban.com/news/detail-496506.html
到了这里，关于微信小程序获取地理位置失败原因及解决方案的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
