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 微信小程序
1、在地图中添加标记点，气泡提示框
配置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',}}, ])
属性 说明 类型 必填 备注 id 标记点id Number 是 marker点击事件回调会返回此id。建议为每个marker设置上Number类型id，保证更新marker时有更好的性能。最大限制9位数 latitude 纬度 Number 是 浮点数，范围 -90 ~ 90 longitude 经度 Number 是 浮点数，范围 -180 ~ 180 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 }
uni-app 实现定点签到功能相关推荐
- ios 签到功能 补签功能 日历
iOS 日历 签到功能 公司APP涉及到签到功能,具体以当前日期为分界线. 也就是今天之前的日期分为已签到和未签到并且未签到可以补签(涉及到3种UI效果).今天分为已签到和未签到(2种UI效果),今天 ...
- uniapp 电商app签到功能实现
签到功能 目前公司所做的电商app要做一个签到送津贴的页面.接口还在开发中,页面已经搭完了. 页面展示如下: 在页面搭建的过程中,遇到几个小问题,下面做一下记录并汇总一下解决方法. uniapp 标题 ...
- java设计按月每天签到_java实现app签到功能
本文实例为大家分享了java实现app签到功能的具体代码,供大家参考,具体内容如下 1.首先设计二张表,第一张表sign_calc记录用户连续签到次数,字段id,user_id,continue_da ...
- 实现一个app的签到功能，没你想的那么复杂~
1. 签到定义以及作用 签到,指在规定的簿册上签名或写一"到"字,表示本人已经到达.在APP中使用此功能,可以增加用户粘性和活跃度. 一个有签到功能的APP,往往会提供补签功能,连 ...
- java实现连续签到加分_java实现app签到功能
本文实例为大家分享了java实现app签到功能的具体代码,供大家参考,具体内容如下 1.首先设计二张表,第一张表sign_calc记录用户连续签到次数,字段id,user_id,continue_da ...
- android签到功能开发,Android简单实现app每月签到功能
本文实例为大家分享了Android实现app每月签到功能的具体代码,供大家参考,具体内容如下 先上一张效果图: 其中这些签到的效果图是在网上找的,然后重要用到的控件就是 GridvVew 了, 代码很 ...
- 实现一个app的签到功能，没你想的那么复杂！
点击关注公众号,实用技术文章及时了解 来源:https://juejin.cn/post/6882657262762983438 1. 签到定义以及作用 签到,指在规定的簿册上签名或写一"到 ...
- 智慧课堂app（一）Flutter+springboot 实现考勤码+gps考勤签到功能
Flutter+springboot实现考勤码+gps考勤签到功能 实现步骤和思路: 设计 发布考勤任务 签到考勤 环境准备 后端步骤: 1.教师发布考勤任务接口 2.rabbitmq收到教师发布考勤 ...
- 原创文章侵权检测功能开放白名单，欢迎大家申请试用；APP端签到功能重新上线，奖励加倍【2021.11.15】
hello,大家好,这里是「CSDN产品周报」第18期.本次更新主要涉及首页.创作中心.APP 三个产品模块,具体细节请往下看. 一.首页优化 1.首页的热榜.专业榜.悬赏榜融合为「新热榜」信息流 2 ...
最新文章
- recv java_用于TCP套接字编程的Recv函数
- oracle--表，用户，授权
- 1、SQL是什么？它能做什么？
- 牛客网SQL篇刷题篇（24-31）
- 2020年10月程序员工资统计，平均14459元
- Cap22_信息系统安全管理
- 31个省环境统计年鉴面板数据（2003-2019年）
- RedisCrawlSpider爬取当当图书信息
- 【java】java Jvm内存结构
- vs 输入代码时出现火花_VSV和VBV随发动机转速和进气温度怎么变化维修执照机务在线...
- Linux rm/rmdir 命令使用介绍
- ORACLE EBS常用表
- 颗粒粒径分析方法汇总
- 使用Python和YOLO检测车牌
- 移动应用ui设计模式pdf_移动ui了解应用ui设计的13种基本模式
- linux 搭建 gitlab 私人服务器
- 全国青少年软件编程等级考试内容，知识点思维导图（Scratch编程四级）
- coursera课程下载_如何在永远消失之前下载Coursera的课程
- Incorrect username or password ( access token )
- win10网络显示依赖服务器无法启动,Win10专业版遇到“依赖服务或组无法启动”怎么办？...