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)
                    }
                })
            }
        }
    })
},
相关推荐
不如摸鱼去16 小时前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
anyup19 小时前
uni-app 没有根组件?仅需几行代码实现全局 Toast 和 Modal
前端·架构·uni-app
2501_9160074719 小时前
Python实现HTTPS爬虫的完整指南:使用requests、BeautifulSoup、Selenium和Scrapy
爬虫·python·ios·小程序·https·uni-app·iphone
FungLeo20 小时前
Taro 开发小程序, 把 @ 配成 src 路径别名,webpack / tsconfig / scss 三处同步的正确姿势
webpack·小程序·taro
AI_AGENT_DEV_AI21 小时前
原生 APP(iOS / Android)的开发与上线
uni-app
灵枢时代21 小时前
小程序在生鲜配送行业,如何设计夜间预约和次日达的订单处理流程?
数据结构·人工智能·小程序
小徐_23331 天前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·微信小程序·uni-app
skiyee2 天前
🔥 oiyo & unibest = 又新又好的 uniapp 模板
前端·uni-app
2601_953720822 天前
【计算机毕业设计】基于微信小程序的拼车服务系统设计与实现
微信小程序·小程序·课程设计
乐启国际旅行社有限公司2 天前
文旅小程序性能优化:分包加载+地图视口懒加载解决景区卡顿与包超限
性能优化·小程序