详解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 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
基于javascript实现tab切换特效
Mar 29 Javascript
微信小程序 上传头像的实例详解
Oct 27 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
Angular短信模板校验代码
Sep 23 Javascript
解决前后端分离 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
基于swoole实现多人聊天室
2018/06/14 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jquery ajaxSubmit 异步提交的简单实现
2014/02/28 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
详解JavaScript基于面向对象之创建对象(2)
2015/12/10 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
基于javascript实现数字英文验证码
2017/01/25 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
基于DATAFRAME中元素的读取与修改方法
2018/06/08 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
python-地图可视化组件folium的操作
2020/12/14 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
经典c++面试题二
2015/08/14 面试题
laravel使用redis队列实例讲解
2021/03/23 PHP
生物制药毕业生自荐信
2013/10/16 职场文书
应届生自我鉴定
2013/12/11 职场文书
大一学生的职业生涯规划书范文
2014/01/19 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
党员目标管理责任书
2014/07/25 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
python基础之爬虫入门
2021/05/10 Python
php双向队列实例讲解
2021/11/17 PHP