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] = point1let [x2, y2] = point2let 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 实现考勤打卡功能
一、在页面中引入地图组件 <map id"map" style"width: 100%; height: 100%" :latitude"myLatitude" :longitude"myLongitude" :circles"circles" :markers"markers"> </map>属性名类型说明longitudeN…...
Jenkins发布失败记录
Exception when publishing, exception message [Exec exit status not zero. Status [127]] 见链接:Jenkins发布时常见异常(持续更新...)_exception when publishing, exception message [exec_码农StayUp的博客-CSDN博客 The remote end hu…...
【算法|双指针系列No.6】leetcode LCR 179. 查找总价格为目标值的两个商品
个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 🍔本专栏旨在提高自己算法能力的同时,记录一下自己的学习过程,希望…...
python flask接口字段存在性校验函数(http接口字段校验)(返回提示缺少的字段信息)validate_fields()
文章目录 字段存在性校验示例 字段存在性校验 from flask import Flask, request, jsonifyapp Flask(__name__)def validate_fields(data, fields):missing_fields [field for field in fields if field not in data]if missing_fields:return False, f"缺少以下字段: …...
Linux文件-内存映射mmap
mmap定义为:Linux通过将一个虚拟内存区域与一个磁盘上的对象(object)关联起来,以初始化这个虚拟内存区域的内容,这个过程称为内存映射(memory mapping)。 在LINUX中我们可以使用mmap用来在进程虚拟内存地址空间中分配地址空间,创…...
linux 查看当前正在运行的端口和监听的端口的工具及命令
在Linux系统中,你可以使用多种工具和命令来查看当前正在运行的端口和监听的端口。以下是一些常用的工具和命令: netstat命令: Netstat(Network Statistics)是一个用于查看网络连接、路由表和接口统计信息的命令行工具…...
保护互联网数据安全:关键方法与最佳实践
在当今数字化时代,互联网数据安全已经成为个人、企业和组织的首要任务之一。随着信息技术的迅猛发展,网络威胁也不断演进,因此保护互联网数据安全变得尤为关键。本文将介绍一些关键方法和最佳实践,帮助您确保互联网数据的安全性。…...
分布式数据库HBase(林子雨慕课课程)
文章目录 4. 分布式数据库HBase4.1 HBase简介4.2 HBase数据模型4.3 HBase的实现原理4.4 HBase运行机制4.5 HBase的应用方案4.6 HBase安装和编程实战 4. 分布式数据库HBase 4.1 HBase简介 HBase是BigTable的开源实现 对于网页搜索主要分为两个阶段 1.建立整个网页索引…...
矩阵求导的本质与分子布局、分母布局的本质
大佬讲解的实在太吊了。 就拿大佬的总结说明一下: 矩阵求导结果,无非就是分子的转置、向量化,分母的转置、向量化,它们的各种组合而已。 1、分子布局的本质:分子是标量、列向量、矩阵向量化后的列向量;分母…...
【广州华锐互动】VR建筑施工事故体验:提高工人安全意识和责任感
VR建筑施工事故体验的意义在于通过模拟真实场景和情况,帮助人们更好地理解建筑施工中的安全问题,并提供一种安全、有效的方式来学习和掌握安全技能。 建筑施工是一项高风险的工作,涉及各种复杂的工作环境和操作过程。在现实中,建筑…...
HSRP热备份路由器协议的解析和配置
HSRP的解析 个人简介 HSRP hot standby router protocol 热备份路由协议(思科私有协议) HSRP v1 version 1 HSRP v2 version 2 虚拟一个HSRP虚拟IP地址 192.168.1.1 开启HSRP的抢占功能 通过其他参数 人为调整谁是主 谁是从 ! 查…...
kotlin实现ArrayDeque
Deque双端队列,一直在使用,却从未了解过源码。 内部逻辑其实很简单 可扩容数组循环队列,循环栈扩容倍数1.5,sizesize(size shr 1)只从两端存取元素 fun main() {val deque MyArrayDeque()repeat(16) {deque.addLast(it)}while …...
java时间格式化
1,CST时间格式化,这个一般是返回值的类型为 Date 类型,如果不做处理,返给前端的就是时间戳,当然也可以更改返回值类型为 String,这样就不用处理了。方法如下: /*** 格式化时间* param date Thu…...
ArduPilot开源飞控之AP_Baro_SITL
ArduPilot开源飞控之AP_Baro_SITL 1. 源由2. back-end抽象类3. 方法实现3.1 AP_Baro_SITL3.2 _timer3.3 temperature_adjustment3.4 wind_pressure_correction3.5 update 4. 参考资料 1. 源由 鉴于ArduPilot开源飞控之AP_Baro中涉及Sensor Driver有以下总线类型: …...
基于Java的病人跟踪治疗管理系统设计与实现(源码+lw+部署文档+讲解等)
文章目录 前言具体实现截图论文参考详细视频演示为什么选择我自己的网站自己的小程序(小蔡coding)有保障的售后福利 代码参考源码获取 前言 💗博主介绍:✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作…...
RCD吸收电路的工作原理及参数计算方法详解
在电子电力技术和自动化控制领域内,RCD吸收电路非常重要,它的作用是吸收瞬间过电压和过电路免受电压波动的影响,因此被广泛应用在各种设备及系统中,今天凡亿将带领小伙伴们来了解下RCD吸收电路的工作原理及计算方法。 1、RCD吸收电…...
leetcode做题笔记169. 多数元素
给定一个大小为 n 的数组 nums ,返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊ n/2 ⌋ 的元素。 你可以假设数组是非空的,并且给定的数组总是存在多数元素。 示例 1: 输入:nums [3,2,3] 输出:3 示例 …...
FATFS f_printf 如何支持写入浮点数据。
参考原子和网上的移植最新的fatfs系统后,挂载打开文件始终返回13错误代码,在自己的项目中移植最新的fatfs0.15版本解决问题,使用f_printf能成功进行浮点数据写入了 参考的文章如下: https://zhuanlan.zhihu.com/p/444427537 问题描述 在使用fatfs的f_printf向文件.csv中写入…...
postman忘记密码提交没响应
现象:通过客户端进到账户页面一直无响应,可copy the url 到浏览器进入页面,使用浏览器提交几次还是没响应。 实测有用方法: 1、通过手机进入官网 https://www.getpostman.com ,找到忘记密码入口。 2、多提交几次后&…...
初学vue,想自己找个中长期小型项目练练手,应该做什么?
前言 可以试着做一两个完整的后台管理项目后再去做其他的,下面推荐一些github上的vue后台管理的项目,可以自己选择性的练一下手 Vue2 1、iview-admin Star: 16.4k 基于 iview组件库开发的一款后台管理系统框架,提供了一系列的强大组件和基…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
css实现圆环展示百分比,根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
Java数值运算常见陷阱与规避方法
整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
软件工程 期末复习
瀑布模型:计划 螺旋模型:风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合:模块内部功能紧密 模块之间依赖程度小 高内聚:指的是一个模块内部的功能应该紧密相关。换句话说,一个模块应当只实现单一的功能…...
