Adinnet-Web Adinnet-Web
首页
  • 技术沉淀

    • 技术沉淀
  • 前端文章

    • JavaScript
  • 前端笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 实用技巧
收藏
  • 分类
  • 标签
  • 归档
首页
  • 技术沉淀

    • 技术沉淀
  • 前端文章

    • JavaScript
  • 前端笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 实用技巧
收藏
  • 分类
  • 标签
  • 归档
  • JavaScript文章

  • 学习笔记

  • 技术沉淀

    • CSS矩形绘制
    • 仿微信通讯录
    • 微信小程序订阅消息
    • 保存海报
    • 微信小程序页面弹框
    • 微信小程序在指定距离范围内签到
      • h5嵌套u3d,使用iframe进行交互
      • 前端主导文件处理方法
      • 图片压缩方法封装
      • 金额大写函数
      • 前端主导的小程序一键导航功能
      • uniapp富文本组件(只支持H5)
      • uniapp二次确认弹框组件(依赖于uview)
      • 无缝滚动插件(vue3)
      • H5与unity通信(只针对unity嵌套H5)
      • 辅助触控
      • 关系图
      • h5&svg点赞动效
      • iframe高精地图文件预览
      • 自适应横向瀑布流布局
      • 考试功能
      • 仿小说翻页
      • 富文本
      • h5唤醒App
      • vue3 Count-to数字翻动
      • 小程序图片转base64
      • 第三方应用跳转微信小程序
      • 圆角TabBar
      • 大屏Header
      • Echarts中国地图
      • 使用computed拦截v-model
      • 消息订阅与发布
      • Html相对路径页面跳转
      • Vite打包本地访问
      • H5主题切换
      • 移动端列表分页
      • 每次进入页面都触发的功能(v3)
      • 智能导诊
      • js中几个优雅的运算符使用技巧
      • 其他CSS伪元素
      • 微信浏览器保存canvas海报
      • uniappH5手动拖拽缩放自定义绘制海报
      • uniapp小程序盒子拖拽排序
      • 微信小程序地图的使用
      • css静态漏斗绘制
      • 微信小程序图片流处理
      • ios时间问题
      • 文字围绕效果
      • 表格树动态计算
      • React中useEffect用法
      • React Hooks 陷阱
      • Naive UI修改默认样式
      • vue 根据div id 滚动到指定view到可视视图中
      • js将[1,2,3]排列组合成[1.12.123]
      • 移动端如何加载vite导出dist包
      • TS探索接口、泛型和自定义类型
      • WebSocket中加入Token
      • 幂方程指数衰减
      • pageSpy
      • 表格多条件搜索
      • axios get 请求 url 转码 空格转成+,导致请求失败
      • NaiveUI使用Message组件遇到的问题记录
      • 小程序多盒子拖拽排序
      • 对象快速筛key方法
      • 倒计时
      • nuxt3中的useAsyncData使用详解
      • nuxt3文件式路由
      • 播放amr格式音频
      • echarts瀑布图
      • vue中使用vueuse进行文件导出
      • 分享一个数据整理方法
      • naiveui表格shift多选
      • 数组递归转tree
      • 自定义指令图片懒加载
      • 将数组里面的对象转换成我们需要的键值对
      • 亚马逊云s3上传
      • 上拉加载更多封装
      • JS设计模式总结笔记
      • 适配移动端页面顶部安全区域
      • 【CryptoJS】使用介绍
      • 微信小程序富文本图片点击放大
      • 微信小程序省市区级联选择
      • uniapp拖动排序插件
      • element ui 的树形结构懒加载,局部更新
      • 表单搜索过滤空值
      • 判断设备类型
      • tsconfig配置打包问题
      • vant-uploader上传组件添加长按保存图片
      • BroadcastChannel跨页面通信
      • pnpm安装问题
      • echart阶梯图形绘制
      • js根据对象拼接参数
      • 集成免密登录
      • 输入框输入数字限制
      • js控制全局css变量
      • 流程图
      • 修改npm包
      • tsx在vue3中的应用
      • 109video播放视频流
      • echart默认展示某个点的tooltip
      • 大屏适配几种方案
      • 表单低代码自定义列表页
      • 表单低代码列表页配置端代码
      • 低代码平台使用的一些好用的js方法
      • vue3cookie的使用
      • 原生js下载文件
      • stompjs 创建socket,断线重连机制
      • iframe作为内嵌网页cookie设置
      • 前端对文件内容解析生成特定算法哈希值方法
      • vue3中前端自定义命名文件名称下载文件的方法
      • 前端项目中权限判断的方法配合路由守卫使用
      • 原生table:表格table中thead固定,tbody超出高度出现滚动条
      • vue中使用原生的方法
      • vue3中amchart的初步使用
      • base64图片加水印
      • 手写签名
      • base64转doc文件
    • 前端
    • 技术沉淀
    黄枫萍
    2023-07-04
    目录

    微信小程序在指定距离范围内签到

    # 1.需要获取当前位置的经纬度

    manifest 文件添加

            "permission" : {
                "scope.userLocation" : {
                    "desc" : "用户在需要获取当前经纬度位置在特定范围内签到"
                }
            },
    
    1
    2
    3
    4
    5

    # 2. 小程序管理后台开通位置权限

    Alt text

    # 3. 检查并提醒用户开启定位授权

    			// 授权地理位置函数
    			getUserLocation() {
    				let that = this
    				uni.getLocation({
    					type: 'gcj02',
    					success(res) {
    						that.latitude = res.latitude
    						that.longitude = res.longitude
    						that.showModal = true
    					},
    					fail(res) {
    						console.log('用户拒绝授权地理位置', res)
    						uni.showModal({
    							title: '提醒',
    							showCancel: true, // 不展示取消按钮
    							content: '您拒绝了位置授权,将无法使用签到功能,点击确定重新获取授权',
    							success(res) {
    								//如果点击确定
    								if (res.confirm) {
    									uni.openSetting({
    										success(res) {
    											//如果同意了位置授权则userLocation=true
    											if (res.authSetting["scope.userLocation"]) {
    
    											}
    										}
    									})
    								}
    							},
    							fail() {
    
    							}
    						})
    					}
    				})
    			},
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36

    # 4. 判断代码

    			getDistances(lat1, lng1, lat2, lng2) {
    				var radLat1 = this.rad(lat1);
    				var radLat2 = this.rad(lat2);
    				var a = radLat1 - radLat2;
    				var b = this.rad(lng1) - this.rad(lng2);
    				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
    					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
    				s = s * 6378.137; // EARTH_RADIUS;
    				// 输出为公里
    				s = Math.round(s * 10000) / 10000;
    
    				var distance = s;
    				var distance_str = "";
    
    				if (parseInt(distance) >= 1) {
    					distance_str = distance.toFixed(2) + "km";
    				} else {
    					distance_str = (distance * 1000).toFixed(2) + "m";
    				}
    				//小小修改,这里返回对象
    				let objData = {
    					distance: distance,
    					distance_str: distance_str
    				}
    				return objData
    			},
          let judgeDistance = this.getDistances(this.latitude, this.longitude, this.courseDetail.latitude, this
            .courseDetail.longitude).distance // 获得的公里数
          let distanceMetre = (judgeDistance * 1000).toFixed(2)
          if (Number(distanceMetre) > this.courseDetail.signRange) {
            uni.showToast({
              title: '您不在签到的范围内',
              icon: 'none',
              duration: 2000
            })
          }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    上次更新: 2023/07/04, 15:58:30
    微信小程序页面弹框
    h5嵌套u3d,使用iframe进行交互

    ← 微信小程序页面弹框 h5嵌套u3d,使用iframe进行交互→

    最近更新
    01
    base64转doc文件
    01-03
    02
    手写签名
    01-03
    03
    base64图片加水印
    01-03
    更多文章>
    Theme by Vdoing | Copyright © 2023-2025 Adinnet
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式