✅作者简介：大家好我是瓜子三百克，一个非科班出身的技术程序员，还是喜欢在学习和开发中记录笔记的博主小白！
📃个人主页：瓜子三百克的主页
🔥系列专栏：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
**🏆结束语🏆 **文章来源：https://www.toymoban.com/news/detail-418187.html
最后如果觉得我写的文章对您有帮助的话，欢迎点赞✌，收藏✌，加关注✌哦，谢谢谢谢！！文章来源地址https://www.toymoban.com/news/detail-418187.html
到了这里，关于微信小程序也可以实现定位打卡/签到打卡了（附源码）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
