微信小程序获取地理位置失败原因及解决方案

这篇具有很好参考价值的文章主要介绍了微信小程序获取地理位置失败原因及解决方案。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序获取用户地理位置失败的原因主要有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组件

<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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包