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组件库开发的一款后台管理系统框架,提供了一系列的强大组件和基…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法
深入浅出:JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中,随机数的生成看似简单,却隐藏着许多玄机。无论是生成密码、加密密钥,还是创建安全令牌,随机数的质量直接关系到系统的安全性。Jav…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比
目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec? IPsec VPN 5.1 IPsec传输模式(Transport Mode) 5.2 IPsec隧道模式(Tunne…...
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南
精益数据分析(97/126):邮件营销与用户参与度的关键指标优化指南 在数字化营销时代,邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天,我们将深入解析邮件打开率、网站可用性、页面参与时…...
#Uniapp篇:chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器:Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
回溯算法学习
一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ;并安装。 基础操作不再赘述。 打开 macOS 终端,开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
