详解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的设计模式
Nov 22 Javascript
Prototype Class对象学习
Jul 19 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
jquery文档操作wrap()方法实例简述
Jan 10 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
原生js实现吸顶效果
Mar 13 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
PHP动态变静态原理
2006/11/25 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
php实现12306余票查询、价格查询示例
2014/04/17 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
javascript常用函数(1)
2015/11/04 Javascript
浅析node连接数据库(express+mysql)
2015/11/30 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
2017/01/13 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
微信小程序 判断手机号的实现代码
2017/04/19 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
react中fetch之cors跨域请求的实现方法
2018/03/14 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
微信分享invalid signature签名错误踩过的坑
2020/04/11 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python读写文件操作示例程序
2013/12/02 Python
python通过elixir包操作mysql数据库实例代码
2018/01/31 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python飞机大战pygame碰撞检测实现方法分析
2019/12/17 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
html5简介及新增功能介绍
2020/05/18 HTML / CSS
canvas 绘图时位置偏离的问题解决
2020/09/16 HTML / CSS
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
平安工地建设方案
2014/05/06 职场文书
城市创卫标语
2014/06/17 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技