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)
                    }
                })
            }
        }
    })
},
相关推荐
浩星9 小时前
uniapp运行鸿蒙报错整理
uni-app
游戏开发爱好者810 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq13 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
阿眠16 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache
2501_9159184118 小时前
iOS 性能监控工具全解析 选择合适的调试方案提升 App 性能
android·ios·小程序·https·uni-app·iphone·webview
初出茅庐的20 小时前
uniapp - AI 聊天中的md组件
前端·vue.js·uni-app
于慨1 天前
uniapp用webview导入本地网页,ios端打开页面空白问题
uni-app