微信小程序实时定位的要做的那些事,你学废了吗?(附示例)

请添加图片描述

✅作者简介:大家好我是瓜子三百克,一个非科班出身的技术程序员,还是喜欢在学习和开发中记录笔记的博主小白!
📃个人主页:瓜子三百克的主页
🔥系列专栏:OC语法
🤟格言:作为一个程序员都应该认识到,好的代码是初级工程师都可以理解的代码, 伟大的代码是可以被学习一年计算机专业的新生所理解。
💖如果觉得博主的文章还不错的话,请点赞👍+收藏⭐️+留言📝支持一下博主哦🤞
🔥系列文章:

1、微信小程序实时定位的要做的那些事,你学废了吗?
2、微信小程序也可以实现定位打卡/签到打卡了


开发框架:uniapp
本片文章主要实现了微信小程序的实时定位功能的小组件实现。

1、获取小程序是否开启定位授权,会吧?

function zmStartMonitor() {
	// #ifdef MP-WEIXIN
	return new Promise((resolve, reject) => {
		wx.getSetting({
			success: (res) => {
				// 查看位置权限的状态 如果是首次授权(undefined)或者之前拒绝授权(false)            
				//!res.authSetting['scope.userLocation']
				if (res.authSetting['scope.userLocation'] == false) {
					//之前拒绝授权(false)
					zmAuthorityOpen(false)
					zmOpenConfirm()
				} else {
					//如果是首次授权则弹出授权窗口进行授权,如果之前进行了授权,则获取地理位置信息
					zmBeginLocation()
				}
				resolve(res)
			},
			fail: (err) => {
				console.log("getSetting_err:", JSON.stringify(err))
				zmAuthorityOpen(false)
				reject(err)
			}
		})
	})
	// #endif
}

2、定位授权弹窗,会吧?

function zmOpenConfirm() {
	// #ifdef MP-WEIXIN
	wx.showModal({
		content: '检测到您没打开定位权限,是否去设置打开?',
		confirmText: "确认",
		cancelText: "取消",
		success: function(res) {
			console.log(res);
			//点击“确认”时打开设置页面
			if (res.confirm) {
				console.log('用户点击确认')
				wx.openSetting({
					success: (res) => {
						zmBeginLocation()
					}
				})
			} else {
				console.log('用户点击取消')
				zmAuthorityOpen(false)
			}
		}
	});
	// #endif
}

3、开启定位监听,会吧?

function zmBeginLocation() {
	// #ifdef MP-WEIXIN
	wx.startLocationUpdate({
		type: "gcj02",
		success(res) {
			zmAuthorityOpen(true)
			console.log("startLocation_suc: " + JSON.stringify(res));
		},
		fail(err) {
			zmAuthorityOpen(false)
			console.error("startLocation_err: " + JSON.stringify(err));
		},
	})
	wx.onLocationChange(function(res) {
		zmLocationSuc(res)
	});
	wx.onLocationChangeError(function(res) {
		zmLocationErr(res)
	});
	// #endif
}

4、定位通知,会吧

/// 监控定位信息成功
function zmLocationSuc(res) {
	/* {
	"latitude":24.44579,
	"longitude":118.08243,
	"speed":-1,
	"accuracy":65,
	"verticalAccuracy":65,
	"horizontalAccuracy":65,
	"errMsg":"getLocation:ok"
	} */
	uni.$emit("iLocationSuc", res)
}

/// 监控定位信息失败
function zmLocationErr(err) {
	uni.$emit("iLocationErr", err)
}

/// 监控定位权限开关
function zmAuthorityOpen(e) {
	uni.$emit("iAuthorityOpen", e)
}

5、结束定位监控,会吧?

function zmEndMonitor() {
	// #ifdef MP-WEIXIN
	console.log("========zmEnd")
	wx.offLocationChange(function(res) {
		zmLocationSuc(res)
	});
	wx.offLocationChangeError(function(err) {
		zmLocationErr(err)
	});
	// #endif
}

6、然后来个买一送一,单次获取本地经纬度,没问题吧?

function zmLocation() {
	return new Promise((resolve, reject) => {
		uni.getSetting({
			success: (res) => {
				// 查看位置权限的状态 如果是首次授权(undefined)或者之前拒绝授权(false)            
				//!res.authSetting['scope.userLocation']
				if (res.authSetting['scope.userLocation'] == false) {
					uni.authorize({
						success(res) {
							/// 获取当前的地理位置、速度。
							uni.getLocation({
								type: 'gcj02',
								success: function(res) {
									resolve(res)
								},
								fail: function(err) {
									reject(err);
								}
							});
						},
						fail(err) {
							reject(err);
						}
					})
				} else {
					//如果是首次授权则弹出授权窗口进行授权,如果之前进行了授权,则获取地理位置信息
					/// 获取当前的地理位置、速度。
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							reject(err);
						}
					});
				}
			}
		})
	})
}

7、写成一个组件抛出去,会吧?

export default {
	zmStartMonitor,
	zmEndMonitor,
	zmLocation,
}

8、定位权限,会判断吧?

小程序定位权限,除了要开启小程序的定位授权,还要开启app和微信应用的定位权限,否则无法获取定位信息,获取如下:

	const systemInfo = uni.getSystemInfoSync()
	// 模拟器没有这两个字段,设置默认打开
	if (systemInfo.locationEnabled != undefined &&
		systemInfo.locationAuthorized != undefined) {
		// 手机系统定位开关
		console.log("手机系统定位开关:", systemInfo.locationEnabled)
		// 微信app定位开关,如果手机系统定位关闭,那么微信app定位也会一起关闭
		console.log("微信应用定位开关:", systemInfo.locationAuthorized)
	}

最后,文件打包奉上

源码/demo展示:
1、gitee:https://gitee.com/chenzm_186/demo-real-time-location-mini
2、csdn:https://download.csdn.net/download/weixin_38633659/85436545


**🏆结束语🏆 **

最后如果觉得我写的文章对您有帮助的话,欢迎点赞✌,收藏✌,加关注✌哦,谢谢谢谢!!

评论 86
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瓜子三百克

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值