微信小程序也可以实现定位打卡/签到打卡了（附源码）

瓜子三百克

已于 2022-09-01 12:33:06 修改

阅读量2.6w

点赞数 35

分类专栏： uni-app 文章标签：微信小程序小程序定位打卡

于 2022-05-06 08:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_38633659/article/details/124599512

版权

uni-app 专栏收录该内容

25 篇文章 23 订阅

订阅专栏

请添加图片描述

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

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

本篇文章带你实现实时定位功能：包括实时定位监听、定位权限判断、经纬度间距计算、判断当前位置是否在目的地的范围区间。

主要应用场景包括但不限于：定位打卡。

1、在 package.json 文件中添加导入文件

"dependencies": {
		"@rattan/location":"1.0.2",
},

2、代码示例

<template>
	<view class="page-content">
		<zm-page-navview title="实时定位" :isBack="true" :borderBottom="false" slot="top" />
		<view class="back-content">
			<view class="flex-content u-flex-1 czm-h-0">
				<scroll-view class="scrollV" scroll-y="true">
					<view>
						<view class="titleV">目标定位：</view>
						<view class="textV">{{JSON.stringify(desPos)}}</view>
						<view class="titleV">wx实时定位：</view>
						<view class="textV">{{curWxPos?JSON.stringify(curWxPos):"---"}}</view>
						<view class="titleV">当前实时定位距离：</view>
						<view class="textV">{{curWxDis}}</view>

						<view class="titleV">uni获取定位：</view>
						<view class="textV11">{{curLocation}}</view>

					</view>
				</scroll-view>
			</view>

			<button class="btn_2" type="primary" @tap="click">10后点击，uni获取经纬度</button>
		</view>
	</view>
</template>

<script>
	import zmtools from "@/zmtools"

	export default {
		name: "realTimePositionPage",
		components: {},
		computed: {
			curWxDis() { // 微信实时定位距离
				let __dis = (zmtools.speedy.zmCalcuDistance(this.curWxPos?.lat, this.curWxPos?.lon, this.desPos.lat,
					this.desPos
					.lon) * 1000).toFixed(1)
				console.log("__dis:", __dis)
				return __dis == "NaN" ? "---" : (__dis + "米");
			},
			curLocation() {
				return this.uniLocation?JSON.stringify(this.uniLocation):"---"
			}
		},
		data() {
			return {
				desPos: {
					lat: 24.490041,
					lon: 118.184591,
				},
				curWxPos: null, // 微信当前实时定位
				uniLocation: null,
			}
		},

		onLoad(options) {
			this.getLocation()
		},

		onUnload() {},

		onShow() {
			zmtools.location.monitor.zmBegin()
			uni.$on('iLocationSuc', (e) => {
				console.log("iLocationSuc_e:", JSON.stringify(e));
				this.curWxPos = {
					lat: e?.latitude,
					lon: e?.longitude,
				}
			})
			uni.$on('iLocationErr', (e) => {
				console.log("iLocationErr_e:", JSON.stringify(e));
			})
		},
		onHide() {
			zmtools.location.monitor.zmEnd()
			uni.$off('iLocationSuc');
			uni.$off('iLocationErr');
		},

		methods: {
			click() {
				this.getLocation();
			},

			async getLocation() {
				var _temp = await zmtools.location.func.zmLocation();
				this.uniLocation = {
					latitude:_temp.latitude,
					longitude:_temp.longitude,
				};
				console.log("_temp: " + JSON.stringify(_temp));
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100vw;
		height: 100vh;
		background: #F5F9FC;

		.back-content {
			margin: 30rpx;
			padding: 20rpx;
			//  底部安全高度，顺序不要乱
			height: calc(100vh - (88rpx + var(--status-bar-height)) - 30rpx - constant(safe-area-inset-bottom) - 30rpx - (88rpx + 30rpx));
			height: calc(100vh - (88rpx + var(--status-bar-height)) - 30rpx - env(safe-area-inset-bottom) - 30rpx - (88rpx + 30rpx));
			border-radius: 20rpx;
			box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.05);
			background: #FFFFFF;

			.flex-content {
				width: 100%;
				height: 100%;

				.scrollV {
					width: 100%;
					height: 100%;
					.titleV {
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
						margin-bottom: 30rpx;
						text-align: left;
					}

					.textV {
						margin-bottom: 20rpx;
						font-size: 28rpx;
						color: #666666;
						text-align: left;
					}
				}

			}

			.btn_2 {
				position: absolute;
				width: 80%;
				height: 88rpx;
				line-height: 88rpx;

				bottom: calc(constant(safe-area-inset-bottom) * 0.5 + 30rpx);
				bottom: calc(env(safe-area-inset-bottom) * 0.5 + 30rpx);
				border-radius: 44rpx;
				background-image: linear-gradient(129deg, #FFE061 0%, #FFC723 100%);
				font-size: 36rpx;
				color: #1C1C1C;
			}

			button::after {
				border: none;
			}
		}
	}
</style>