uniapp微信小程序获取地理位置授权

最新推荐文章于 2024-09-20 21:14:39 发布

认真的小蜗牛

最新推荐文章于 2024-09-20 21:14:39 发布

阅读量838

点赞数 1

分类专栏： uni-app

本文链接：https://blog.csdn.net/renxiaoxing55/article/details/117841189

版权

uni-app 专栏收录该内容

30 篇文章 5 订阅

订阅专栏

本文档展示了如何在uni-app中处理用户授权并获取其地理位置。`onShow`方法触发`handleAuthorize`，请求用户授权访问地理位置。成功后，通过`uni.getLocation`获取坐标，并存储在本地存储中。若授权失败，提示用户并引导至设置页面重新授权。此过程涉及到小程序的用户权限管理、事件监听和存储操作。

摘要由CSDN通过智能技术生成

文件写在了App.vue

onShow() {
	this.handleAuthorize()
},
methods: {
  //  获取用户的地理位置，
  getLocationFn() {
	  const _this = this
	  uni.getLocation({
		  type: 'gcj02', // <map> 组件默认为国测局坐标gcj02
		  altitude: true,
		  success(res) {
			    uni.setStorageSync('latitude', res.latitude)
			    uni.setStorageSync('longitude', res.longitude)
				uni.$emit('getlocal', 1)
				// _this.globalData.userInfo = {
				// 	latitude: res.latitude,
				// 	longitude: res.longitude,
				// }
		  }
	})
  },
  // 用户授权
  handleAuthorize() {
	   const _this = this // 下边this 为undefined
		uni.authorize({
			scope: 'scope.userLocation', // 获取地理信息必填的参数，其它参数见文档
			success(res) {
				_this.getLocationFn()
			},
			// 授权失败
			fail(err) {
				err = err['errMsg']
				uni.showModal({
					title: '温馨提示',
					content: '为享受智能小程序，您必须授权!',
					showCancel: false,
					confirmText: '确认授权'
				})
				// 这里只设置了确认按钮，没有取消按钮
				.then(res => {
					if (res[1]['confirm']) { // 点击了确认按钮时
					// 调用下边方法时，会弹出 【使用我的地理位置】界面， 未设置直接返回，还是会走fail授权失败的函数，
					// 还是会弹出上边的温馨提示！！！
					// 如果设置, scope.userLocation: true
					uni.openSetting({
						success(res) {
						// 如果不设置，res结果：
						// {errMsg: "openSetting:ok", authSetting: {scope.userLocation: false}}
						// 如果设置, res结果： 
					    // {errMsg: "openSetting:ok", authSetting: {scope.userLocation: true}}
						// console.log('小程序设置界面：', res)
					}
				 })
			   }
		    })
	    }
    })
   },
}