场景：模拟打开，固定一个打卡范围，获取到用户的位置，然后两个经纬度比较计算，就能得出距离。
uniapp的文档地址 ： https://uniapp.dcloud.net.cn/api/location/location.html
<template>
<view class="">
<!-- 地图案例测试 -->
<view style="margin-top:50px;">
<map
style="width: 100%; height: 300px;"
:latitude="latitude"
:longitude="longitude"
:circles="circles"
:markers="covers">
</map>
</view>
<button @click="clickLatLog">打卡</button>
</view>
</template>
<script>
export default {
data() {
return {
circles:[
{
latitude: 39.909,
longitude: 116.39742,
color: '#69BFBE6A',
fillColor: '#69BFBE6A',
radius: 100,
strokeWidth: 2,
},
],
latitude: 39.909,
longitude: 116.39742,
covers: [{ //图标定位参数
latitude: 39.90882367614431,
longitude:116.3974663363424,
iconPath: 'https://dianliu.oss-cn-hangzhou.aliyuncs.com/static/map/company.png',
callout:{
content:'可以打卡了',
color:'#FFFFFF',
fontSize:12,
borderColor: '#69BFBE',
bgColor: '#69BFBE',
padding: 5,
borderRadius: 3,
display: 'ALWAYS',
textAlign: 'center',
}
}],
}
},
onLoad() {
},
components: {
},
methods: {
clickLatLog(){
//正式流程
// uni.getLocation({
// type: 'wgs84',
// success: function (res) {
// console.log('点击获取经度 ：' + res.longitude);
// console.log('点击获取纬度：' + res.latitude);
// const point1=['39.909','116.39742']// 打卡点
// const point2=[res.latitude,res.longitude]
// this.getDistance(point1, point2);
// if(this.getDistance(point1, point2)<=50){
// uni.showToast({
// title:'打卡成功'
// })
// }else{
// uni.showToast({
// title:'打卡失败',
// icon:'error'
// })
// }
// },fail(err) {
// console.log('fail----：', err);
// }
// });
// 测试 自动模拟数据
const point1=['39.909','116.39742']// 打卡点
// const point2=['39.91073487150436','116.3941948363954']//用户所在位置 >50米
const point2=['39.90882367614431','116.3974663363424']//用户所在位置 >50米
this.getDistance(point1, point2);
if(this.getDistance(point1, point2)<=50){
uni.showToast({
title:'打卡成功'
})
}else{
uni.showToast({
title:'打卡失败',
icon:'error'
})
}
},
// 格式化经纬度
rad(d){
return (d * Math.PI) / 180.0
},
// 计算距离
getDistance(point1, point2){
let [x1, y1] = point1
let [x2, y2] = point2
let Lat1 = this.rad(x1) // 纬度
let Lat2 = this.rad(x2)
let a = Lat1 - Lat2 // 两点纬度之差
let b = this.rad(y1) - this.rad(y2) // 经度之差
let s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(Lat1) * Math.cos(Lat2) * Math.pow(Math.sin(b / 2), 2)))
// 计算两点距离的公式
s = s * 6378137.0 // 弧长等于弧度乘地球半径（半径为米）
s = Math.round(s * 10000) / 10000 // 精确距离的数值
console.log('得到距离---',s)
return s;
}
}
}
</script>
<style>
</style>
结果
image.png
