详解js根据百度地图提供经纬度计算两点距离


Posted in Javascript onMay 13, 2019

正常在使用百度地图时,我们可以通过BMap的实例对象提供的方法计算距离:

var map = new BMap.Map('map_canvas');
map.getDistance(point1 ,point2);
//point1、point2 是Point对象

如果在不使用百度地图,但是已知百度地图的经纬度情况下也是可以计算出与上面相同的值的

三方库 此库提供计算两点距离的方法

引用此库使用 返回(米)

BMapLib.GeoUtils.getDistance(point1 ,point2)

当然如果只想计算距离也可以直接用下面的代码:

注:BMap需要导入,使用如下:

BMapLib.GeoUtils.getDistance(lng1,lat1,lng2,lat2)

import BMap from 'BMap'
 
var BMapLib = window.BMapLib = BMapLib || {};
 (function() {
 
     /**
      * 地球半径
      */
     var EARTHRADIUS = 6370996.81;
 
     /**
      * @exports GeoUtils as BMapLib.GeoUtils
      */
     var GeoUtils =
       /**
      * GeoUtils类,静态类,勿需实例化即可使用
      * @class GeoUtils类的<b>入口</b>。
      * 该类提供的都是静态方法,勿需实例化即可使用。
      */
     BMapLib.GeoUtils = function(){
 
       };
 
     /**
      * 将度转化为弧度
      * @param {degree} Number 度
      * @returns {Number} 弧度
      */
     GeoUtils.degreeToRad = function(degree){
         return Math.PI * degree/180;
       }
 
     /**
      * 将v值限定在a,b之间,纬度使用
      */
     function _getRange(v, a, b){
         if(a != null){
            v = Math.max(v, a);
           }
         if(b != null){
            v = Math.min(v, b);
           }
         return v;
       }
 
     /**
     * 将v值限定在a,b之间,经度使用
     */
     function _getLoop(v, a, b){
         while( v > b){
            v -= b - a
           }
         while(v < a){
            v += b - a
           }
         return v;
       }
   /**
    * 计算两点之间的距离,两点坐标必须为经纬度
    * @param {lng1} Number 点对象
    * @param {lat1} Number 点对象
    * @param {lng2} Number 点对象
    * @param {lat2} Number 点对象
    * @returns {Number} 两点之间距离,单位为米
    */
     GeoUtils.getDistance = function(lng1, lat1, lng2 ,lat2){
         let point1 = new BMap.Point(parseFloat(lng1) ,parseFloat(lat1));
         let point2 =new BMap.Point(parseFloat(lng2) ,parseFloat(lat2));
         //判断类型
         if(!(point1 instanceof BMap.Point) ||
             !(point2 instanceof BMap.Point)){
             return 0;
           }
         point1.lng = _getLoop(point1.lng, -180, 180);
         point1.lat = _getRange(point1.lat, -74, 74);
         point2.lng = _getLoop(point2.lng, -180, 180);
         point2.lat = _getRange(point2.lat, -74, 74);
         let x1, x2, y1, y2;
         x1 = GeoUtils.degreeToRad(point1.lng);
         y1 = GeoUtils.degreeToRad(point1.lat);
         x2 = GeoUtils.degreeToRad(point2.lng);
         y2 = GeoUtils.degreeToRad(point2.lat);
         return EARTHRADIUS * Math.acos((Math.sin(y1) * Math.sin(y2) + Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)));
       }
})();

以上所述是小编给大家介绍的js根据百度地图提供经纬度计算两点距离详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
用JSON做数据传输格式中的一些问题总结
Dec 21 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
Jul 22 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
JS监听Esc 键触发事键
Apr 14 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
解决前后端分离 vue+springboot 跨域 session+cookie失效问题
May 13 #Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 #Javascript
详解async/await 异步应用的常用场景
May 13 #Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 #Javascript
JavaScript Math对象和调试程序的方法分析
May 13 #Javascript
jsonp跨域获取百度联想词的方法分析
May 13 #Javascript
基于Fixed定位的框选功能的实现代码
May 13 #Javascript
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
Laravel学习教程之model validation的使用示例
2017/10/23 PHP
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
node.js中使用socket.io的方法
2014/12/15 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
Vue.js组件通信之自定义事件详解
2019/10/19 Javascript
Django自定义认证方式用法示例
2017/06/23 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
python交互式图形编程实例(三)
2017/11/17 Python
python随机取list中的元素方法
2018/04/08 Python
深入浅析python 中的匿名函数
2018/05/21 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python的matplotlib绘图如何修改背景颜色的实现
2019/07/16 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
使用Keras预训练模型ResNet50进行图像分类方式
2020/05/23 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
预备党员思想汇报范文
2013/12/29 职场文书
家长通知书家长评语
2014/04/17 职场文书
大学生团日活动总结
2015/05/06 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
创业计划书详解
2019/07/19 职场文书
利用Java连接Hadoop进行编程
2022/06/28 Java/Android