微信小程序也可以实现定位打卡/签到打卡了（附源码） |
您所在的位置：网站首页 › 计时考勤软件 › 微信小程序也可以实现定位打卡/签到打卡了（附源码） |
微信小程序也可以实现定位打卡/签到打卡了（附源码）
|
✅作者简介：大家好我是瓜子三百克，一个非科班出身的技术程序员，还是喜欢在学习和开发中记录笔记的博主小白！ 📃个人主页：瓜子三百克的主页 🔥系列专栏：OC语法 🤟格言：作为一个程序员都应该认识到，好的代码是初级工程师都可以理解的代码， 伟大的代码是可以被学习一年计算机专业的新生所理解。 💖如果觉得博主的文章还不错的话，请点赞👍+收藏⭐️+留言📝支持一下博主哦🤞 🔥系列文章： 1、微信小程序实时定位的要做的那些事，你学废了吗？ 2、微信小程序也可以实现定位打卡/签到打卡了 本篇文章带你实现实时定位功能：包括实时定位监听、定位权限判断、经纬度间距计算、判断当前位置是否在目的地的范围区间。 主要应用场景包括但不限于：定位打卡。 1、在 package.json 文件中添加导入文件 "dependencies": { "@rattan/location":"1.0.2", },2、代码示例 目标定位： {{JSON.stringify(desPos)}} wx实时定位： {{curWxPos?JSON.stringify(curWxPos):"---"}} 当前实时定位距离： {{curWxDis}} uni获取定位： {{curLocation}} 10后点击，uni获取经纬度 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)); } }, } .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; } } }
源码/demo展示： 1、gitee：https://gitee.com/chenzm_186/demo-real-time-location-mini 2、csdn：https://download.csdn.net/download/weixin_38633659/85436545 **🏆结束语🏆 ** 最后如果觉得我写的文章对您有帮助的话，欢迎点赞✌，收藏✌，加关注✌哦，谢谢谢谢！！ |
【本文地址】
今日新闻 |
推荐新闻 |