uniapp小程序持续获取用户位置信息,后台位置获取

做一个小程序持续获取用户位置信息的功能,即使小程序切换到后台也能继续获取,getLocation这个api只有小程序在前台才能获取位置,所以不用这个

先申请一个腾讯地图key

在uniapp项目配置源码视图里加上这个代码
先获取权限,再开启后台持续获取位置的能力

javascript 复制代码
"mp-weixin" : {
    "requiredPrivateInfos" : [
        "chooseLocation",
        "getLocation",
        "onLocationChange",
        "startLocationUpdateBackground"
    ],
    "requiredBackgroundModes" : [ "location" ],
    "permission" : {
        "scope.userLocation" : {
            "desc" : "方便您使用更完整的功能"
        },
        "scope.startLocationUpdateBackground" : {
            "desc" : "方便获取您的位置"
        }
    }
},

下面是使用页面的代码

javascript 复制代码
//获取位置权限
setPosition(){
	const thle = this;
	uni.getSetting({
	   success(res) {
	      console.log('权限权限',res.authSetting)
		  if (!res.authSetting['scope.userLocation']) {
			  uni.authorize({
			  	  scope: 'scope.userLocation',
			  	  success() {
			  		 console.log("用户成功授权位置信息")
			  		 thle.keepPosition()
			  	  },
			  	  fail() {
			  		  console.log("用户拒绝授权位置信息,再次提示用户授权")
			  		  thle.showRefuseLocationPermission('nonono')
			  	  }
			    })
		  }else if(!res.authSetting['scope.userLocationBackground']){
			  //后台获取位置变化的权限
			  uni.authorize({
			  	  scope: 'scope.userLocationBackground',
			  	  success() {
			  		 console.log("用户成功授权位置信息")
			  		 thle.keepPosition()
			  	  },
			  	  fail() {
			  		  console.log("用户拒绝授权位置信息,再次提示用户授权")
			  		  thle.showRefuseLocationPermission('nonono')
			  	  }
			    })
		  }else{
			 thle.keepPosition() 
		  }
		}
	})
},
//持续上传位置
keepPosition(){
	const thle = this;
	// uni.startLocationUpdate({
	//   success: res => console.log('开启前台位置成功'),
	//   fail: err => console.error('开启前台位置失败:', err),
	// });
	//开启前后台位置获取
	uni.startLocationUpdateBackground({
	  success: res =>{
		  console.log('前后台位置成功')
		  uni.onLocationChange(rr=> {
		  	console.log('持续位置:',rr);
		  	console.log('纬度:' + rr.latitude);
		  	console.log('经度:' + rr.longitude);
			thle.updataPosition(rr.latitude,rr.longitude)
		  });
	  },
	  fail: err => console.error('前后台位置失败:', err),
	});
},
//更新位置
updataPosition(latitude,longitude){
	const thle = this;
	console.log('更新位置',latitude,longitude)
	uni.request({
	    url: `https://apis.map.qq.com/ws/geocoder/v1/?key=${'腾讯地图key'}&location=`+ latitude + ',' +longitude,
	    success: res => {
	      console.log('解析成功',res) 
		  let address = res.data.result.address;//经纬度解析后的地址
	    }
	  })
},
// 用户拒绝授权的展示
showRefuseLocationPermission(e) {
    const that = this;
    uni.showModal({
        title: "提示",
        content: "需要获取用户位置以及后台定位权限",
        confirmText: "前往设置",
        showCancel: false,
        success(res) {
            if (res.confirm) {
                uni.openSetting({
                    success: (res) => {
                        console.log("打开设置成功", res);
						if (res.authSetting['scope.userLocation']) {
							console.log('成功授权userLocation')
							
						} else {
							console.log('用户未授权userLocation')
							// 递归调用本函数,(函数套函数)
							that.showRefuseLocationPermission()
						}
                    },
                    fail: (err) => {
                        console.log("打开设置失败", err)
                    }
                })
            }
        }
    })
},
相关推荐
时无诳语Imp19 分钟前
VUE + pdfh5 实现pdf 预览,主要用来uniappH5实现嵌套预览PDF
vue.js·pdf·uni-app
我还能再卷一点31 分钟前
小程序自定义底部tabbar,并且解决遮罩层无法遮挡住底部tabbar问题
windows·小程序·apache
鬼鬼骑士1 小时前
Java实用办公小程序
java·开发语言·小程序
V+zmm1013410 小时前
基于微信小程序的水果销售系统的设计与实现springboot+论文源码调试讲解
java·微信小程序·小程序·毕业设计·springboot
!win !13 小时前
外部H5唤起常用小程序链接规则整理
前端·小程序
林涧泣14 小时前
【Uniapp-Vue3】navigator路由与页面跳转
前端·vue.js·uni-app
林涧泣18 小时前
【Uniapp-Vue3】uniapp创建组件
前端·javascript·uni-app
洗发水很好用18 小时前
uni-app无限级树形组件简单实现
uni-app
parade岁月18 小时前
uniapp Android 原生插件开发-Module扩展为例-从开发到测试到部署到uniapp项目
android·uni-app
你的眼睛會笑19 小时前
Uniapp仿ChatGPT Stream流式输出(非Websocket)
websocket·chatgpt·uni-app