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)
                    }
                })
            }
        }
    })
},
相关推荐
说私域5 小时前
基于开源AI智能客服、AI智能名片与S2B2C商城小程序的微商服务优化及复购转介绍提升策略研究
人工智能·小程序
有梦想的刺儿10 小时前
uniapp手机端video标签层级过高问题
uni-app
&白帝&12 小时前
Uniapp 获取系统信息:uni.getSystemInfo 与 uni.getSystemInfoSync
uni-app
熬耶18 小时前
Uniapp之微信小程序自定义底部导航栏形态
微信小程序·小程序·uni-app
IT毕设实战小研21 小时前
基于Spring Boot校园二手交易平台系统设计与实现 二手交易系统 交易平台小程序
java·数据库·vue.js·spring boot·后端·小程序·课程设计
加蓓努力我先飞1 天前
小兔鲜儿-小程序uni-app(二)
uni-app
weixin_177297220691 天前
剧本杀小程序系统开发:重构推理娱乐生态
小程序·重构·娱乐
IT码农-爱吃辣条1 天前
解决在uniapp真机运行上i18n变量获取不到问题
javascript·vue.js·uni-app
IT毕设实战小研2 天前
基于SpringBoot的救援物资管理系统 受灾应急物资管理系统 物资管理小程序
java·开发语言·vue.js·spring boot·小程序·毕业设计·课程设计
hongweihao2 天前
儿子不收拾玩具,我用AI给他量身定制开发一个APP,这下舒服了
uni-app·app·ai编程