uniapp开发小程序实现考勤打卡,附带源码

news2024/12/25 1:23:16

效果图:

考勤打卡三步走:

  • 在地图上绘制打卡区域:

uniapp开发小程序之在地图上进行绘制图形,并将经纬度转为固定格式的字符串_uniapp 绘制地图_阿晨12138的博客-CSDN博客

  • 获取到用户定位,并跳转到当前用户定位:

uniapp开发小程序之使用地图选择位置与定位到用户当前位置_uniapp地图选取位置_阿晨12138的博客-CSDN博客

  • 判断用户经纬度是否在绘制图形经纬度范围内: 

借助第三方库:turf/helpers

turf/helpers是Turf.js库中的一个模块,用于提供一些辅助函数和工具,以简化地理空间分析和操作。Turf.js是一个流行的JavaScript地理空间分析库,它提供了许多功能强大且易于使用的函数,用于处理地理数据。 

首先终端npm安装:turf/helpers,然后引入使用

<script>
    import {
        point,
        polygon
    } from '@turf/helpers';



    const pointCoordinates = [114.1275xxxx, 22.6070xxx];
    const polygonCoordinates = [
    [114.1251xxx, 22.607911xx1625156],
    [114.1242869xxx5, 22.607174xx4267],
    [114.12552648903466, 22.6057xxx6267],
    [114.1273xx44345, 22.60700xxx4],
    [114.1251063xx85, 22.6079115xx5156]
    ];
    const pt = point(pointCoordinates);
    const poly = polygon([polygonCoordinates]);
    const isInside = booleanPointInPolygon(pt, poly);
    if (isInside) {
        this.result = '这个点在这个范围内';
      } else {
        this.result = '这个点不在在这个范围内';
      }
</script>

扩展:

打卡成功播放一个音乐提示 

const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = 'https://img.tukuppt.com/newpreview_music/09/04/05/5c8b001d3f57236050.mp3';
innerAudioContext.onPlay(() => {
		console.log('开始播放');
});

经纬度查询:

【经纬度查询】在线地图经度纬度查询|经纬度地名坐标转换

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/852008.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【2023年11月第四版教材】《第2章-信息技术发展之存储和数据库(第二部分)》

第2章-信息技术发展之存储和数据库&#xff08;第二部分&#xff09; 3 存储和数据库3.1 存储系统架构3.2 存储技术3.3 数据库体系结构3.4 常用存储数据库类型优缺点 3 存储和数据库 3.1 存储系统架构 存储系统架构DASNASSAN安装难易度不一定简单困难数据传输协议SCSI/FC/ATA…

谷歌关闭跨域限制.(生成一个开发浏览器),Chrome关闭跨域

(一)、首先找到浏览器在电脑磁盘中的位置,并复制 (二)、复制一个浏览器的快捷方式到桌面(不影响正常浏览器) (三)、chrom鼠标右键属性&#xff0c;修改快捷方式的目标 &#xff08;四&#xff09;chrome.exe 后面添加 --disable-web-security --user-data-dir 复制的Chrome浏览…

视频监控汇聚EasyCVR平台WebRTC流地址无法播放的原因排查

开源EasyDarwin视频监控TSINGSEE青犀视频平台EasyCVR能在复杂的网络环境中&#xff0c;将分散的各类视频资源进行统一汇聚、整合、集中管理&#xff0c;在视频监控播放上&#xff0c;TSINGSEE青犀视频安防监控汇聚平台可支持1、4、9、16个画面窗口播放&#xff0c;可同时播放多…

ZIG:理解未来编程语言的视角

文章目录 摘要&#xff1a;引言&#xff1a;性能简洁性和模块化避免常见错误和陷阱总结&#xff1a;参考资料&#x1f4d1;: 摘要&#xff1a; 本文介绍了新兴编程语言ZIG的目标和特点&#xff0c;包括高性能、简洁性和模块化&#xff0c;并分析了这些特点是如何通过语言设计来…

CC++内存管理与模版初阶

目录 四、C&C内存管理 (一)C/C内存分布 (二)C内存管理方式 1、new/delete操作内置类型 2、new和delete操作自定义类型 (三)operator new与operator delete函数 (四)new和delete的实现原理 1、内置类型 2、自定义类型 (五)定位new表达式(placement-new) (六)八股文 1、n…

Keburnetes pod概念 策略

Pod基础概念 Pod是kubernetes中最小的资源管理组件&#xff0c;Pod也是最小化运行容器化应用的资源对象。一个Pod代表着集群中运行的一个进程。kubernetes中其他大多数组件都是围绕着Pod来进行支撑和扩展Pod功能的&#xff0c;例如&#xff0c;用于管理Pod运行的StatefulSet和D…

Flowable-结束事件-空结束事件

目录 定义图形标记XML内容 定义 空结束事件是最常见的一种结束事件&#xff0c;也是最简单的一种结束事件&#xff0c;只要把结束任务置于流程 或分支的最后节点&#xff0c;流程实例运行到该节点的时候&#xff0c;流程引擎就会结束该流程实例或分支。前面提 到&#xff0c;结…

Springboot中整合netty启动后,项目无法正常启动?

1.现象描述 netty等一般放在程序启动后再启动&#xff0c;多以下面方式启动&#xff1a; Component Order(value 2) public class NettyUdpServer implements ApplicationRunner {如果在 Order 后面还有其它模块被启动&#xff0c;那么其它模块就会被阻塞。 2.原因分析 主…

ArcGIS Pro实践技术应用——暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合、案例应用全流程科研能力提升

查看原文>>>ArcGIS Pro实践技术应用——暨基础入门、制图、空间分析、影像分析、三维建模、空间统计分析与建模、python融合能力 本文将利用ArcGIS Pro 将您的 GIS 工作组织到工程中&#xff0c;您可以使用 ArcGIS Pro 映射 2D 和 3D 数据。借助 ArcGIS Pro&#xff…

装备制造业行业报告最新发布!

随着“十四五”战略规划的全力推动&#xff0c;物联网、5G、人工智能等新兴技术快速发展&#xff0c;制造装备智能化和自动化成为目前制造业发展的主要方向&#xff0c;重点推进高档数控机床与基础制造装备&#xff0c;自动化成套生产线&#xff0c;智能控制系统&#xff0c;精…

教程:通过navicat修改视频监控EasyCVR云平台的登录密码

TSINGSEE青犀视频监控管理平台EasyCVR可以根据不同的应用场景需求&#xff0c;让平台在内网、专网、VPN、广域网、互联网等各种环境下进行音视频的采集、接入与多端分发。在视频能力上&#xff0c;平台可实现视频实时直播、云端录像、云存储、回放与检索、告警上报、视频快照、…

揭秘压力测试:从报告中看软件的极限

压力测试简介 压力测试&#xff0c;对于软件开发和测试领域的人来说&#xff0c;绝不是一个陌生的词汇。但是对于许多人来说&#xff0c;它的真正含义、目的和重要性可能仍然是一个迷。那么&#xff0c;什么是压力测试&#xff0c;为什么它如此关键&#xff1f; 压力测试是一…

[excel]vlookup函数对相同的ip进行关联

一、需求&#xff08;由于ip不可泄漏所以简化如下&#xff09; 有两个sheet: 找到sheet1在sheet2中存在的ip&#xff0c;也就是找到有漏洞的ip 二、实现 vlookup函数有4个参数 第一个:当前表要匹配的列&#xff0c;选择第一个sheet当前行需要处理的ip即可 第二个:第二个shee…

实力派双向奔赴!南卡携手傅园慧,再显最“硬核”的运动游泳耳机

近日&#xff0c;国内知名骨传导耳机品牌NANK南卡官宣游泳冠军—傅园慧担任为其品牌形象大使。 傅园慧的运动职业生涯开始只是患有哮喘&#xff0c;父母希望她通过练习游泳增强体质。没想到跟着教练学习后&#xff0c;她很快表现出对游泳的喜爱与天赋&#xff0c;从此命运的齿…

Swagger技术-自动生成测试接口

简介 前端资源和后端资源分开&#xff0c;前端通过nginx运行&#xff0c;后端通过tomcat运行 前端技术框架&#xff1a; Swagger 作用&#xff1a;生成各种样式的接口文档&#xff0c;以及在线接口调试页面等 kinfe4j是基于mvc框架继承swagger生成api文档的增强解决方案 …

6. C++类的静态成员

一、对象的生产期 生存期&#xff1a;对象从诞生到结束的这段时间生存期分为静态生存期和动态生存期 1.1 静态生存期 对象的生存期与程序的运行期相同&#xff0c;则称它具有静态生存期在文件作用域中声明的对象都是具有静态生存期的若在函数内部的局部作用域中声明具有静态…

红帽8.2版本CSA题库:第二题配置您的系统以使用默认存储库

vim /etc/yum.repos.d/BaseOS_AppStream.repo [BaseOS] nameBaseOS baseurlhttp://foundation0.ilt.example.com/dvd/BaseOS gpgcheck0 enabled1[AppStream] nameAppStream baseurlhttp://foundation0.ilt.example.com/dvd/AppStream gpgcheck0 enabled1:wq&#xff01; #保存…

Vulkan 绘制显示设计

背景 众所周知&#xff0c;Vulkan是个跨平台的图形渲染API&#xff0c;为了友好地支持跨平台&#xff0c;Vulkan自然也抽象出了很多接口层去对接各个操作系统&#xff0c;抹平系统间的差异&#xff0c;Swap Chains即为WSI。 其本质上是一种图像队列&#xff0c;此队列会按顺序…

k8s资源管理方法详解(陈述式、声明式)

目录 一&#xff1a;陈述式资源管理方法 二&#xff1a; 基本信息查看 1、查看信息 2、创建 3、删除 4、service 的 type 类型 三&#xff1a;项目实例 1、创建 kubectl create命令 2、发布 kubectl expose命令 3、在 node 节点上操作&#xff0c;查看负载均衡端…

cuda系列详细教程

随着人工智能的发展与人才的内卷&#xff0c;很多企业已将深度学习算法的C部署能力作为基本技能之一。面对诸多arm相关且资源有限的设备&#xff0c;往往想更好的提速&#xff0c;满足更高时效性&#xff0c;必将更多类似矩阵相关运算交给CUDA处理。同时&#xff0c;面对市场诸…