uni-app 实现考勤打卡功能

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

      <map id="map" style="width: 100%; height: 100%" :latitude="myLatitude" :longitude="myLongitude" :circles="circles" :markers="markers"> </map>
属性名类型说明
longitudeNumber中心经度
latitudeNumber中心纬度
markersArray标记点
circlesArray

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

// 地图上圆形区域标识
const circles = ref([{latitude: '',longitude: '',color: '#69BFBE6A',fillColor: '#69BFBE6A',radius: 100,strokeWidth: 2,},
])
属性说明类型必填备注
latitude纬度Number浮点数,范围 -90 ~ 90
longitude经度Number浮点数,范围 -180 ~ 180
color描边的颜色String8位十六进制表示,后两位表示alpha值,如:#000000AA;#00000为十六进制
fillColor填充颜色String8位十六进制表示,后两位表示alpha值,如:#000000AA;#00000为十六进制
radius半径Number
strokeWidth描边的宽度Number
level压盖关系,默认为 abovelabelsStringfalse微信小程序

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标记点idNumbermarker点击事件回调会返回此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

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

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

相关文章

python 实现MA指标

交易中均线是非常常用的指标&#xff0c;有指标终于均线的说法&#xff0c;利用均线指标可以构造更多基于价格的指标。目前广大的交易者多用python打造自已的相关交易工具&#xff0c;下面是我利用python产现的MA指标计算代码&#xff1a; def read_ma(self, stock_dat, *windo…

VRRP 虚拟路由器冗余协议的解析和配置

VRRP的解析 个人简介 原理和HSRP的差不多&#xff0c;少了一些状态就只有了三种状态 还有不同的就是VRRP严格按照抢占要求 一个VRRP组中具有最高优先级的设备成为Master路由器缺省优先级为100若优先级相同&#xff0c;具有最高接口IP地址最大的路由器成为Master路由器抢占(Pr…

Centos指令合集

2023-10-09 防火墙 开启 systemctl start firewalld自启动 systemctl enable firewalld.service关闭 systemctl stop firewalld禁用 systemctl disable firewalld.service查看状态 systemctl status firewalld

【前端】sortable.js Vue 数组数据更新问题 数据跟页面不同步 深度复制

先用一个数据深拷贝数据&#xff0c;这里使用了 slice 方法&#xff0c;然后置空&#xff0c;最后在 $nextTick 中赋值深拷贝出来的数组值。最后可以了。 猜测是vue没有检测到arr改变 解决方案 增加唯一不变的key 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲…

360测试开发技术面试题目

最近面试了360测试开发的职位&#xff0c;将面试题整理出来分享~ 一、java方面 1、java重载和重写的区别 重载overloading 多个方法、相同的名字&#xff0c;不同的参数 重写overwrite 子类继承父类&#xff0c;对方法进行重写 2、java封装的特性 可以改变内部实现&#xff0c;…

Python与CAD系列基础篇(三)创建二三维多段线、圆弧、椭圆弧、样条曲线

目录 0 简述1 二三维多段线2 圆弧3 椭圆弧4 样条曲线0 简述 本篇详细介绍使用①通过pyautocad连接AutoCAD进行处理②通过ezdxf处理dxf格式文件创建和编辑多段线、圆弧、椭圆弧和样条曲线的方法。 1 二三维多段线 pyautocad方式 分别创建二维和三维多段线: from pyautocad …

UnrealEngine iOS 打包 —— 签名证书(cer、p12)生成

官方文档 docs.unrealengine.com/5.3/zh-CN/setting-up-ios-tvos-and-ipados-provisioning-profiles-and-signing-certificates-for-unreal-engine-projects 打开 ProjectSettings -> Platforms -> iOS 可以看到签名证书配置 需要拓展名为 .cer 和 .p12 的一对证书和密钥…

精益生产与MES生产管理系统相互融合

近年来&#xff0c;精益生产理念在企业管理中越来越受欢迎。它强调以最小的浪费&#xff0c;在最短的时间内&#xff0c;生产出高质量的产品。这一理念的实施手段包括准时制生产方式、适时生产方式等&#xff0c;消除浪费、看板、快换工装等都是精益提高的工具方针。 然而&…

新版Microsoft Edge启用IE模式

新版Microsoft Edge采用了和Chrome一样的内核Chromium&#xff0c;青出于蓝而更胜于蓝。与 Chrome相比&#xff0c;能直接登录微软账号进行同步&#xff0c;自带插件商店&#xff08;亦可用Chrome插件&#xff09;&#xff0c;占用比 Chrome低&#xff0c;速度不差。 缺点就是国…

Spark任务优化分析

一、背景 首先需要掌握 Spark DAG、stage、task的相关概念 Spark的job、stage和task的机制论述 - 知乎 task数量和rdd 分区数相关 二、任务慢的原因分析 找到运行时间比较长的stage 再进去看里面的task 可以看到某个task 读取的数据量明显比其他task 较大。 如果是sql 任…

通过modbus与串口屏通讯控制

串口屏作为modbus主机&#xff0c;下位机主板作为从机&#xff0c;在从机中建立一张数据表与串口屏作为数据交换缓冲&#xff0c;从机移植freemodbus协议栈&#xff0c;定时响应串口屏的轮询 如下&#xff0c;在一个项目中建立的数据表 //上报给屏的槽状态 typedef struct _d…

自动售货机销售数据分析与应用

⭐简单说两句⭐ 作者&#xff1a;后端小知识 CSDN个人主页&#xff1a;后端小知识 &#x1f50e;GZH&#xff1a;后端小知识 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 摘要&#xff1a; 本案例将主要结合自动售货机的实际情况&#xff0…

APISIX 中ETCD 的问题

1. 问题1 &#xff1a; Error: client: etcd cluster is unavailable or misconfigured; error #0: client: endpoint http://etcd:2379 exceeded header timeout error #0: client: endpoint http://etcd:2379 exceeded header timeout 修改APISIX config ETCD_ADVERTISE_CL…

folium 增加搜索、经纬度弹出,字段弹出的方法

m.add_child(folium.LatLngPopup()) cellgeogpd.read_postgis(‘SELECT “铜陵3G第二批拍照基站”.*,region.name FROM “铜陵3G第二批拍照基站”,(SELECT geom,“name” from “gis_县” where 市‘铜陵市’ and name‘枞阳县’) as region where st_intersects(“铜陵3G第二…

wordpress的lnmp环境一键安装和手工配置

1. 使用oneinstack安装lnmp环境&#xff0c;按照"Recommend PHP 7.4 or greater and MySQL version 5.7 or MariaDB version 10.4 or greater."的wordpress官方建议配置生成安装脚本。配置后在/root/oneinstack/options.conf中可找到安装的相关目录位置和密码等。 2.…

23.10.7.sql 里面的DISTINCT

例如&#xff1a; SELECT DISTINCT t.container_no FROM biz_inventory_task_detail t 这里distinct干嘛的 解释&#xff1a; DISTINCT是一个关键字&#xff0c;用于在SELECT语句中返回唯一不重复的值。 在这个查询中&#xff0c;使用DISTINCT关键字&#xff0c;是为了返回biz…

虹科方案丨自动驾驶多传感器数据融合方法

文章来源&#xff1a;雅名特自动驾驶 点此阅读原文&#xff1a;https://mp.weixin.qq.com/s/QsPMWZDGZaPdEx47L2VmeA 近年来&#xff0c;深度学习技术在涉及高维非结构化数据领域展现出了最先进的性能&#xff0c;如计算机视觉、语音、自然语言处理等方面&#xff0c;并且开始涉…

C++泛型编程--模版

这里写目录标题 模板特点 函数模版语法注意事项二级目录二级目录二级目录二级目录二级目录二级目录二级目录 模板 特点 函数模版 语法 最上面一行是在声明 我要创建模板了 其中T可以替换 但是一般都用T 因为他是template的首字母 之后 进行函数定义与声明 使用背景&#xff…

信息系统项目管理师第四版学习笔记——项目绩效域

干系人绩效域 干系人绩效域涉及与干系人相关的活动和职能。在项目整个生命周期过程中&#xff0c;有效执行本绩效域可以实现的预期目标主要包含&#xff1a;①与干系人建立高效的工作关系&#xff1b;②干系人认同项目目标&#xff1b;③支持项目的干系人提高了满意度&#xf…

基于SpringBoot的健身房管理系统

目录 前言 一、技术栈 二、系统功能介绍 会员信息管理 员工信息管理 会员卡类型管理 健身项目管理 会员卡管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步…