uni-app 实现考勤打卡功能

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

      <map id="map" style="width: 100%; height: 100%" :latitude="myLatitude" :longitude="myLongitude" :circles="circles" :markers="markers"> </map>

属性名	类型	说明
longitude	Number	中心经度
latitude	Number	中心纬度
markers	Array	标记点
circles	Array	圆

1、显示地图中的圆形标识
在这里插入图片描述 通过配置表格中的circles就能实现地图上的圆形标识

// 地图上圆形区域标识
const circles = ref([
  {
    latitude: '',
    longitude: '',
    color: '#69BFBE6A',
    fillColor: '#69BFBE6A',
    radius: 100,
    strokeWidth: 2,
  },
])

属性	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
color	描边的颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA；#00000为十六进制
fillColor	填充颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#000000AA；#00000为十六进制
radius	半径	Number	是
strokeWidth	描边的宽度	Number	否
level	压盖关系，默认为 abovelabels	String	false	微信小程序

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',
      }
  },
])

属性	说明	类型	必填	备注
latitude	纬度	Number	是	浮点数，范围 -90 ~ 90
longitude	经度	Number	是	浮点数，范围 -180 ~ 180
id	标记点id	Number	是	marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数
title	标注点名	String	否	点击时显示，callout存在时将被忽略
iconPath	显示的图标	String	是	项目目录下的图片路径，支持相对路径写法，以’/'开头则表示相对小程序根目录；也支持临时路径
width	标注图标宽度	Number	否	默认为图片实际宽度
height	标注图标高度	Number	否	默认为图片实际高度
callout	自定义标记点上方的气泡窗口	Object	否	支持的属性见下表，可识别换行符。

二、小程序获取定位信息

可以通过小程序提供的方法获取到当前的定位
官方链接：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()
         },
     })
  })
}

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

 uni.getLocation({
   type: 'wgs84',
   altitude: true,
   success: function (res) {
      // res  获取到的定位信息
   },
 })

在手机上进行测试时可能会无法定位，这是我们就需要在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
}

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

uni-app 实现考勤打卡功能

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

二、小程序获取定位信息

三、打卡签到

猜你喜欢