小程序 获取腾讯地图计算两经纬度的实际距离(可批量)_多地打卡

在这里插入图片描述
在这里插入图片描述

文章目录

          • 一、小程序
            • 1. 安装vue-jsonp
            • 2. 引入腾讯sdk
            • 3. 实例化
            • 4. 二点求距离
            • 5. 多点求距离

文档地址:
https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance
申请开发者密钥(key): 申请密钥
在这里插入图片描述

一、小程序
1. 安装vue-jsonp
 npm i -S vue-jsonp

main.js

//解决跨域
import {VueJsonp} from 'vue-jsonp'
Vue.use(VueJsonp)
2. 引入腾讯sdk

直接使用小程序的sdk会有跨域问题,因此,此sdk,根据小程序sdk修改而成的

下载链接:qqmap-wx-jssdk1.2.zip

引入qqmap-wx-jssdk.js

// 根据自己实际项目的位置引用文件
import qqmapsdk from '../../utils/qqmap-wx-jssdk.min.js';
3. 实例化

再具体的方法内部声明

// 实例化腾讯地图API核心类
const QQMapWX = new qqmapsdk({key: '腾讯申请的key' // 必填
});
4. 二点求距离
 //计算二点之间的距离calculateTwoPlaceDistance() {// 实例化腾讯地图API核心类const QQMapWX = new qqmapsdk({key: '腾讯申请的key' // 必填});const _this = this;//调用距离计算接口QQMapWX.calculateDistance({//mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行),不填默认:'walking',可不填//from参数不填默认当前地址//获取表单提交的经纬度并设置from和to参数(示例为string格式)// from: e.detail.value.start || '', //若起点有数据则采用起点坐标,若为空默认当前地址// to: e.detail.value.dest, //终点坐标mode: "straight",from: "39.77466,116.55859", //当前位置的经纬度to: "39.775091,116.56107", //办公地点经纬度 "北京市通州区经海三路137号"success: (res) => { //成功后的回调// debugger// console.log(res);let hw = res.result.elements[0].distance; //拿到距离(米)// console.log("hw", hw);if (hw && hw !== -1) {if (hw < 1000) {hw = hw + "m";}//转换成公里else {hw = (hw / 2 / 500).toFixed(2) + "km";}} else {hw = "距离太近或请刷新重试";}// console.log("当前位置与办公地点距离:" + hw);alert("当前位置与办公地点距离:" + hw)},});},

在这里插入图片描述

5. 多点求距离

多点与当前经纬度之间的距离(计算当前经纬度和多地打卡地经纬度之间的距离)

//多点与当前经纬度之间的距离(计算当前经纬度和多地打卡地经纬度之间的距离)calculateMorePlaceDistance() {// 实例化腾讯地图API核心类const QQMapWX = new qqmapsdk({key: '腾讯申请的key' // 必填});const that = this;//调用距离计算接口QQMapWX.calculateDistance({from: {latitude: that.latitude,longitude: that.longitude},to: that.moreWorkPlace, //strs为字符串,末尾的“;”要去掉success: function(res) {// console.log("多地求距离->", res)const moreWorkDistanceList = [];const distanceList = res.result.elements;for (var i = 0; i < distanceList.length; i++) {const distAddress = distanceList[i].distance;// 把计算出来的距离放到数组容器中,等会统一计算moreWorkDistanceList.push(distAddress)// console.log("多地打卡数组追加元素->", moreWorkDistanceList);}/*** 转换单位不利于计算,统一用m单位,一起计算,求出数组中最小的一个,最后和设定的办公距离(愿),比较大小;* 1.如果小于设置距离,属于考勤范围内* 2.如果大于设置距离,属于外勤范围*/that.moreWorkDistanceListTemp = moreWorkDistanceList// console.log("多地打卡地与当前位置距离数组:" + that.moreWorkDistanceListTemp);alert("多地打卡地与当前位置距离容器:" + that.moreWorkDistanceListTemp)},fail: function(res) {// console.log("求距离发生异常->", res);},complete: function(res) {// console.log("求距离执行完成->", res)}})},

在这里插入图片描述

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

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

相关文章

前端常用 JavaScript 方法封装

目录 1. 输入一个值,返回其数据类型**2. 数组去重3. 字符串去重4. 深拷贝 浅拷贝5. reverse底层原理和扩展6. 圣杯模式的继承7. 找出字符串中第一次只出现一次的字母8. 找元素的第 n 级父元素9. 返回元素的第n个兄弟节点10. 封装mychildren,解决浏览器的兼容问题11. 判断元素…

H5 移动端 获取腾讯地图计算两经纬度的实际距离(可批量)_多地打卡

文章目录一、H5移动端1. 安装vue-jsonp2. 引入腾讯sdk3. 实例化4. 二点求距离5. 多点求距离文档地址&#xff1a;https://lbs.qq.com/service/webService/webServiceGuide/webServiceDistance一、H5移动端 1. 安装vue-jsonp npm i -S vue-jsonpmain.js //解决跨域 import {Vu…

JavaScript 中的 3 种 for 循环语句

1. for 应用较广,简单实用。 const array = [4, 7, 9, 2, 6]; for (let index = 0;</

GitHub 经典项目归集

目录 1. Vue32. Vue 源码解密3. 简历项目4. JavaScript5. Flutter6. TypeScript7. 前端必备在线工具8. 管理后台9. 数据结构与算法10. CSS 学习专题11. Node.js12. 小程序13. 前端监控14. 前端的代码规范15. 程序员必备仓库16. 设计

基于 vue 2.0 开发的轻量,高性能日历组件

文章目录1. 安装scss2. 安装日历组件3. 安装提示组件4. 注册组件5. 页面6. 效果图1. 安装scss npm i -D sass-loader8.0.2 npm i node-sass4.14.12. 安装日历组件 npm i vue-calendar-component --save3. 安装提示组件 npm install --save vue-component-toast4. 注册组件 …

Access中编写VBA代码时,如何区分、使用“.”和“!”

目录 1. 释义一2. 释义二3. 释义三1. 释义一 在 Access 以及其它一些使用 VBA 编程的软件中,点号(.)和叹号(!)的区别是让很多刚接触 VBA 编程不久的新手经常感到困惑的一个问题。 按照 VBA 的语法规则,点号(.)用于引用属性,叹号(!)用于引用集合对象,这个是最标准的定义。…

SQL数据库查询基础(主讲MySQL,必要时补充了SQLServer、Access兼容性说明)

目录 一. 逻辑运算符1. 执行的优先级2. 多个 or 子句的简化写法 - IN二. 模糊查询通配符 与 Like三. SQL语句中的计算字段四. SQL 子句的执行顺序五. 系统函数1. 拼接多个字符串字段2. 处理日期和时间3. 聚集函数六. Group By - 分组查询七. Having 子句注,文中如无特别说明,…

vue-cli 创建vue3项目

文章目录一、环境准备二、核心组件2.1. axios封装2.2. vuex2.3. vue-router一、环境准备 前提&#xff1a; # 安装node环境 node -v npm -v# 卸载旧脚手架工具 npm uninstall vue-cli -g or yarn global remove vue-cli# 安装新版的脚手架工具 指定版本vue/cli版本号 npm ins…

Excel VBA 处理图形图表详解

目录 一. 图表各元素在VBA中的表达方式1. 图表区2. 绘图区3. 数据系列4. 图表轴5.网格线6、数据标签7. 图表标题、图例和数据表8. 趋势线和误差线二. 图表类型三. VBA图表常用命令1. 获取工作表的行数2. 使用工作表函数检查 A1单元格中的数据是否为数字:3. 激活单元格区域 A 列…

Jquery 日期组件

项目开源地址&#xff1a;https://gitee.com/gblfy/date-field

十六进制、RGB 与 VBA颜色值对照表

十六进制、RGB 与 VBA颜色值对照表 颜色名称 RGB颜色 十六进制颜色代码 VBA颜色代码 颜色效果 黑色0,0,0#000000&H000000象牙黑41,36,33#292421&H212429灰色192,192,192#C0C0C0&HC0C0C0

利用 VBA 和 HTML自制兼容 WPS及 EXCEL(32位/64位)的颜色选择器

效果&#xff1a; 选择器参考网友一个且里面还残缺不全的半拉子工程方案进行了完善和改进。 技术方案&#xff1a; VBA HTML 实现的具体功能&#xff1a; 画VBA窗体时&#xff0c;非常方便地查看VBA颜色值&#xff08;如上图&#xff09;&#xff1b;默认颜色&#xff1a;有…

Apollo 分布式配置中心 搭建篇

文章目录一、介绍1. 痛点2. 为什么选择Apollo二、快速开始2.1. 安装mysql2.2. 下载脚本2.3. 初始化脚本三、服务端配置3.1. 下载安装包3.2. 创建目录3.3. 解压3.4. 配置3.5. 启动3.6. 防火墙策略3.6. 效果验证四、测试4.1. 引入依赖4.2. 配置4.3. 测试类4.4. 启动项目4.5. 效果…

VBA FSO 对象模型知识点梳理

目录 一. FSO-文件系统对象1.1 FSO的用途1.2 FSO 对象模型所包含的对象1.3 FSO对象的创建1.4 FSO对象属性示例二 FSO 中的方法和属性2.1 属性2.2 方法2.2.1 BuildPath 方法2.2.2 FileExists 方法2.2.3 GetFile 方法2.2.4 GetFileName 方法2.2.5

VBA GetOpenFilename 方法

目录 一. 作用二. 语法三. 参数说明四. 用法示例GetOpenFilename方法 一. 作用 显示标准的 “ 打开 ” 对话框,获取 用户 文件名,而 不必真正打开 任何文件。 二. 语法 expression.GetOpenFilename(FileFilter, FilterIndex, Title, ButtonText, MultiSelect)

docker Redis集群

文章目录1. 创建redis网卡2. 创建redis配置3. 启动redis集群4. 创建集群5. 记录与调试6. 故障转移1. 创建redis网卡 # 删除容器 docker rm -f ${docker ps -aq}# 创建redis网卡 docker network create redis --subnet 172.38.0.0/16# 删除redis网卡 docker network rm redis# …

VBA 用 Environ 获取系统环境变量

目录 1. VBA Environ系统环境变量:2. 利用 VBA 获得系统所有环境变量1. VBA Environ系统环境变量: 返回 Windows 目录: Environ ("Windir") 返回应用程序文件夹: Environ ("ProgramFiles") 返回用户配置文件目录:

关于 VBA Erase() 函数清空数组

目录 1. 关于 Erase() 函数1.1 作用1.2 语法1.3 说明1.4 示例1.4.1 示例一1.4.2 示例二1. 关于 Erase() 函数 1.1 作用 重新初始化大小固定的数组的元素,以及释放动态数组的存储空间。它的行为取决于数组的类型(见 1.3 )。 1.2 语法 Erase arraylist所需的 arraylist 参…

Excel 表单控件之 CheckBox 集合事件响应

示例代码: Sub CheckClick()Dim check As CheckBoxSet check = Sheet1.CheckBoxes(Application.Caller)If check.Value = 1 ThenSheet1.Range("a1").Value =

VBA 自制 TreeView 树视图,附加控件 TreeView 最优替代方案

目录 一. Treeview Demo1.1 概述1.2 按钮说明1.3 TreeView 事件说明二. Instructions - 使用说明2.1 Excel 用户2.1.1 常规使用2.1.2 开发大型 TreeView 的技巧2.2 Word 和 Access 用户2.2.1 Access 实现三. 类模块3.1 类模块一:clsTreeView3.2 类模块二:clsNode三. 版本历史…