uni-app 实现考勤打卡功能

一、在页面中引入地图组件

      
1

1、显示地图中的圆形标识
通过配置表格中的circles就能实现地图上的圆形标识

// 地图上圆形区域标识
const circles = ref([
  {
    latitude: '',
    longitude: '',
    color: '#69BFBE6A',
    fillColor: '#69BFBE6A',
    radius: 100,
    strokeWidth: 2,
  },
])
1
2
3
4
5
6
7
8
9
10
11

2、在地图中添加标记点，气泡提示框

配置markers展示标记点以及提示气泡

// 地图上气泡提示
const markers: any = ref([
  {
    id: 1,
    latitude: '',
    longitude: '',
    width: 10,
    height: 17,
    // 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',
      }
  },
])
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

二、小程序获取定位信息

可以通过小程序提供的方法获取到当前的定位
官方链接：https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.startLocationUpdateBackground.html

const getLocation = () => {
  uni.showLoading({
    title: '定位中...',
    mask: true,
  })
  return new Promise((resolve, reject) => {
     const _locationChangeFn = (res: any) => {
         console.log('location change', res)
         uni.hideLoading()
         wx.offLocationChange(_locationChangeFn)
     }
     wx.startLocationUpdate({
         success: (res: any) => {
             wx.onLocationChange(_locationChangeFn)
             resolve(res)
         },
         fail: (err: any) => {
             reject()
         },
     })
  })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

这个方法也可以获取到定位信息，但是不能频繁的获取

 uni.getLocation({
   type: 'wgs84',
   altitude: true,
   success: function (res) {
      // res  获取到的定位信息
   },
 })
1
2
3
4
5
6
7

在手机上进行测试时可能会无法定位，这是我们就需要在manifest.json文件配置下图中红框中的内容

三、打卡签到

此时我们拿到了自己所在位置经纬度以及签到地经纬度可以通过计算得到两点之间的距离，再通过与我们地图圆形区域半径进行比较，便可以判断用户是否进入打卡区域。

计算方法：

// 计算距离
const getDistance = (point1: any[], point2: any[]) => {
  let [x1, y1] = point1
  let [x2, y2] = point2
  let Lat1 = rad(x1) // 纬度
  let Lat2 = rad(x2)
  let a = Lat1 - Lat2 //	两点纬度之差
  let b = rad(y1) - 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)
 
  distance.value = s
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

原文链接：https://blog.csdn.net/qq_57399113/article/details/127588698