uniapp-微信小程序定位(授权定位)

/**
 * 授权&定位
 */
export default {
    data() {
        return {
            isLocated: false // 是否定位成功
        }
    },
    methods: {
        /**
         * 获取经纬度并触发回调函数
         * @param {Function} successCb 获取成功回调
         * @param {Function} authDenyCb 获取失败回调
         */
        getLocation(successCb, authDenyCb) {
            const self = this
            uni.getLocation({
              type: 'wgs84', // 默认gps 坐标
              altitude: false, // 是否返回高度
              accuracy: 'best', // 精度值为20m
              success(res) {
                    successCb && successCb(res)
                    self.isLocated = true
              },
                fail(err) {
                if (
                  err.errMsg ===
                  'getLocation:fail 频繁调用会增加电量损耗,可考虑使用 wx.onLocationChange 监听地理位置变化'
                ) {
                  uni.showToast({
                    title: '请勿频繁定位',
                    icon: 'none'
                  })
                }
                if (err.errMsg === 'getLocation:fail auth deny') {
                  // 未授权
                    uni.showToast({ title: '无法定位,请重新获取位置信息', icon: 'none' })
                    authDenyCb && authDenyCb()
                    self.isLocated = false
                }
                if (err.errMsg === 'getLocation:fail:ERROR_NOCELL&WIFI_LOCATIONSWITCHOFF') {
                    uni.showModal({
                        content: '请开启手机定位服务',
                        showCancel: false
                    })
                }
              }
            })
        },
        /**
         * 重新授权并调用定位方法
         * @param {Function} successCb 授权成功回调
         * @param {Function} authDenyCb 授权失败回调
         */
        getAuthorize(successCb, authDenyCb) {
            uni.authorize({
              scope: 'scope.userLocation',
              success: () => {
                this.getLocation(successCb, authDenyCb)
              },
              fail: (err) => {
                err = err['errMsg']
                uni
                  .showModal({
                    content: '需要授权位置信息',
                    confirmText: '确认授权'
                  })
                  .then((res) => {
                    if (res[1]['confirm']) {
                      uni.openSetting({
                        success: (res) => {
                          if (res.authSetting['scope.userLocation']) {
                            // 授权成功
                            uni.showToast({
                              title: '授权成功',
                              icon: 'none'
                            })
                          } else {
                            // 未授权
                            uni.showToast({
                              title: '授权失败',
                              icon: 'none'
                            })
                          }
                          this.getLocation(successCb, authDenyCb)
                        }
                      })
                    }
                    if (res[1]['cancel']) {
                      // 取消授权
                      console.log('取消')
                      this.getLocation(successCb, authDenyCb)
                    }
                  })
              }
            })
          },
    }
}
uniapp是一款跨平台的开发框架,支持同时开发微信小程序、App、H5等多个平台的应用程序。在uniapp中开发微信小程序定位功能非常简单,可以通过调用uniapp提供的API实现。 首先,在uniapp的项目中,我们可以使用uni.getLocation方法来获取用户的位置信息。这个方法会弹出微信小程序的位置授权提示框,用户可以选择是否授权获取位置信息。我们可以在页面的生命周期钩子函数中调用这个方法,例如在mounted钩子函数中。 在调用uni.getLocation方法之前,我们需要先引入uniapp提供的API,可以通过在页面的script标签中添加import语句来实现。引入之后,就可以在页面的方法中调用uni.getLocation方法了。 调用uni.getLocation方法后,会返回一个Promise对象,我们可以通过.then方法来处理获取位置信息成功的情况,并进行相应的处理操作,例如展示地理位置的信息。如果获取位置信息失败,可以使用.catch方法来处理。 通过以上的步骤,我们就可以在uniapp微信小程序中实现定位功能的demo了。当然,在实际开发中,我们还可以通过uni.showLoading等方法来优化用户体验,例如在获取位置信息期间显示一个加载动画。 总结一下,uniapp微信小程序定位demo的实现步骤如下:引入uniapp提供的API,调用uni.getLocation方法获取位置信息,处理获取位置信息成功或失败的情况,并进行相应的操作。希望以上的回答对您有所帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值