vue:如何通过两个点的经纬度进行距离的计算(很简单)

news2024/10/6 16:27:31

首先假设从api获取到了自己的纬经度和别人的纬经度

首先有一个概念需要说一下

地球半径

由于地球不是一个完美的球体,所以并不能用一个特别准确的值来表示地球的实际半径,不过由于地球的形状很接近球体,用[6357km] 到 [6378km]的范围值可以涵盖需要的所有半径。并且通常情况下,地球半径有几个常用值:

极半径,从地球中心至南极或北极的距离, 相当于6356.7523km; 赤道半径,从地球中心到赤道的距离,大约6378.137km; 平均半径,6371.393km,表示地球中心到地球表面所有各点距离的平均值; RE,地球半径,有时被使用作为距离单位, 特别是在天文学和地质学中常用,大概距离是6370.856km;

所以我们通过地球半径进行计算的时候,通常情况下,我们可以使用上面的每一个值都可以进行计算,不过或多或少都会有误差的,但这样的误差是也是允许存在的。最后通过let f = e.toFixed(2)保留距离的两位小数

通过生命周期函数mouted获取当前两个位置的距离

运行结果

这样就可以完成通过经纬度进行距离的计算了是不是很简单实用,直接复制粘贴方法调用就可以使用了。

方法:

calculateDistance(lat1, lon1, lat2, lon2) { //计算两点之间的距离
				console.log('lat1, lon1, lat2, lon2', lat1, lon1, lat2, lon2)
				let R = 6371; //地球半径
				let dLat = this.deg2rad(lat2 - lat1)
				let dLon = this.deg2rad(lon2 - lon1)
				let a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				let d = R * c; // 距离,单位:千米  
				let e = parseFloat(d)
				let f = e.toFixed(2)
				return f;
			},
 deg2rad(deg) {
			 return deg * (Math.PI / 180)
			},

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

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

相关文章

Python-VBA函数之旅-eval函数

目录 一、eval函数的常见应用场景: 二、eval函数安全使用注意事项: 三、eval函数与exec函数对比分析: 1、eval函数: 1-1、Python: 1-2、VBA: 2、相关文章: 个人主页:ht…

计算机考研408真的很难吗?

408难!科软有人四战没上岸,就是408拖的后腿! 这位同学数二144英二81,真的太可惜了! 是因为择校的问题吗? 看了他的备战经历后,我们发现,还真不是择校问题! 是典型的备…

13个Java基础面试题

Hi,大家好,我是王二蛋。 金三银四求职季,特地为大家整理出13个 Java 基础面试题,希望能为正在准备或即将参与面试的小伙伴们提供些许帮助。 后续还会整理关于线程、IO、JUC等Java相关面试题,敬请各位持续关注。 这1…

9. 性能

文章目录 第9章 性能9.1 性能通用场景9.2 性能策略控制资源需求管理资源 9.3 基于策略的性能的问卷9.4 性能模式服务网格负载均衡限流Map-Reduce 9.5 扩展阅读9.6 问题讨论 第9章 性能 身行一例,胜似千言。 —Mae West 这是跟时间有关的。 性能,即&…

JavaWeb--前端--01HTML和CSS

文章目录 1 前端开发介绍2 开发工具3 文档查阅4 CSS选择器VSCode的插件 点击进入:W3School的HTML文档 点击进入:W3School的CSS文档 内容就在这两个网站里面 1 前端开发介绍 Web标准也称为网页标准,由一系列的标准组成,大部分由W3C( World W…

ArcGIS加载的各类地图怎么去除服务署名水印

昨天介绍的: 一套图源搞定!清新规划底图、影像图、境界、海洋、地形阴影图、导航图-CSDN博客文章浏览阅读373次,点赞7次,收藏11次。一体化集成在一起的各类型图源,比如包括影像、清新的出图底图、地形、地图阴影、道路…

定制k8s域名解析------CoreDns配置实验

定制k8s域名解析------CoreDns配置实验 1. 需求 k8s集群内通过CoreDns互相解析service名. 同时pana.cn域为外部dns解析,需要通过指定dns服务器进行解析 再有3个服务器,需要使用A记录进行解析 2. K8s外DNS服务器 查看解析文件 tail -3 /var/named/pana.cn.zone 解析内容 ww…

error: failed to push some refs to ‘https://gitee.com/zhao-zhimin12/gk.git‘

git push origin master发现以下报错: 解决办法: 一、强制推送 git push origin master -f (加上 -f 就是强制) 二、 先拉取最新代码,再推送 1.git pull origin master 2.git push origin master

11.基础乐理-音域、1=C到底是那一组的C

音域: 音域它指的是一个乐器(包括人声),能发出的所有的音高总,比如我们拿钢琴来看,钢琴最低的是大字二组的A2, 钢琴最高音是小字五组的c5,钢琴的音域是A2 - c5,如图1所示…

接口测试——postman

一.下载与安装 https://www.getPostman.com/ 界面导航说明 二.get请求 第一个get请求 批量执行接口请求: 1. 右击run collection 2. 会出现runner标签页 携带参数的GET请求 所谓的查询参数,其实就是URL地址中问号(?)后面的部分…

解决这个设备,搞安防网络不再踩坑!

中午好,我的网工朋友。 随着安全防护领域从模拟技术向IP技术的转型,网络在安防的应用越来越重要,也越来越复杂。 从业多年,我观察到许多行业同仁在技术实践中走了弯路,无论是安防厂商、集成商还是最终用户&#xff0…

C语言 | Leetcode C语言题解之第25题K个一组翻转链表

题目: 题解: /* 定义保存两个地址的结构体* 用来保存反转后结果的头节点和尾节点*/ typedef struct {struct ListNode* head; struct ListNode* tail; } TwoAddress; // 反转中间链表 TwoAddress* reverse(struct ListNode* head){struct ListNode* pr…

7 种实现 CSS 三角形的原理与方法 以及 三角形在网页设计中的作用

三角形在网页设计中不仅是图形设计的基本元素,更是实现视觉引导、空间构建、情绪传达、品牌塑造、性能优化以及创新表达的重要工具。其广泛应用和多功能性使其成为设计师手中不可或缺的设计语言组成部分。本文介绍了7种CSS实现三角形的方法。 CSS实现三角形主要有以…

基于java+springboot+vue实现的健身俱乐部系统(文末源码+Lw+ppt)23-49

摘 要 随着社会的发展,健身俱乐部的管理形势越来越严峻。越来越多的用户利用互联网获得信息,健身信息鱼龙混杂,信息真假难以辨别。为了方便用户更好的获得本健身俱乐部管理信息,因此,设计一种安全高效的健身俱乐部网…

护眼大路灯十大排名品牌有哪些?护眼落地灯排行榜新鲜出炉!

作为一位电器测评博主,我的后台总会有人不断询问关于大路灯的问题。我大概汇总了一下,常见的就是护眼大路灯哪款好,护眼大路灯十大排名品牌有哪些等等,这些问题的存在主要是因为市面上存在着众多的大路灯品牌,质量参差…

【LeetCode刷题记录】54. 螺旋矩阵

54 螺旋矩阵 给你一个 m 行 n 列的矩阵 matrix ,请按照 顺时针螺旋顺序 ,返回矩阵中的所有元素。 示例 1: 输入:matrix [[1,2,3],[4,5,6],[7,8,9]] 输出:[1,2,3,6,9,8,7,4,5] 示例 2: 输入&#xf…

目标检测——食品饮料数据集

一、重要性及意义 对食品和饮料进行目标检测的重要性和意义体现在多个方面: 商业应用与市场分析:目标检测技术在食品和饮料行业有着广泛的应用前景。通过对超市货架、餐馆菜单或广告海报中的食品和饮料进行自动识别和计数,商家可以获取关于产…

MongoDB的安装配置及使用

文章目录 前言一、MongoDB的下载、安装、配置二、检验MongoDB是否安装成功三、Navicat 操作MongoDB四、创建一个集合,存放三个文档总结 前言 本文内容: 💫 MongoDB的下载、安装、配置 💫 检验MongoDB是否安装成功 ❤️ Navicat 操…

【计算机毕业设计】基于微信小程序的开发项目150套(附源码+演示视频+LW)

大家好!我是程序猿老A,感谢您阅读本文,欢迎一键三连哦。 🧡今天给大家分享200的微信小程序毕业设计,后台用Java开发,这些项目都经过精心挑选,涵盖了不同的实战主题和用例,可做毕业设…

【计算机毕业设计】家庭食谱管理系统产品功能介绍——后附源码

🎉**欢迎来到琛哥的技术世界!**🎉 📘 博主小档案: 琛哥,一名来自世界500强的资深程序猿,毕业于国内知名985高校。 🔧 技术专长: 琛哥在深度学习任务中展现出卓越的能力&a…