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

大家好，欢迎来到IT知识分享网。

✅作者简介：大家好我是瓜子三百克，一个非科班出身的技术程序员，还是喜欢在学习和开发中记录笔记的博主小白！
📃个人主页：瓜子三百克的主页
🔥系列专栏：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>

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

**🏆结束语🏆 **

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