事实上，地球上任意两个坐标点在地平线上的距离并不是直线，而是球面的弧线。

下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离。半正矢公式也成为Haversine公式，它最早时航海学中的重要公式，其原理是将地球看作圆形，利用公式来计算圆形表面上任意两个点之间的弧线距离。

　　Haversine公式中与本项目有关的公式为：

相关符号解释如下:

d : 两点之间的弧线总距离

r : 球体的半径

Q1,Q2: 第一个和第二个坐标点的纬度（需要将角度转换为弧度表示）

y1,y2 : 第一个和第二个坐标点的经度（需要将角度转换为弧度表示）

看个例子：

HTML5运动数据记录页面的设计与实现：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>跑步记录功能的设计与实现</title>

        <style>

            div {

                text-align: left;

                margin: auto;

                padding: 10px;

            }

            .center {

                text-align: center

            }

        </style>

    </head>

    <body>

        <h3>跑步记录功能的设计与实现</h3>

        <hr />

        <div>

            <h4>您的当前状态</h4>

            <ul>

                <li>

                    开始时间：<span id="start_time"></span>

                </li>

                <li>

                    完成时间：<span id="end_time"></span>

                </li>

                <li>

                    总距离：<span id="distance">0</span>km

                </li>

            </ul>

            <h4>详细信息</h4>

            <ul>

                <li>

                    经度：<span id="long"></span>°

                </li>

                <li>

                    纬度：<span id="lat"></span>°

                </li>

                <li>

                    位置精确度：<span id="acc"></span>

                </li>

                <li>

                    海拔高度：<span id="alt">0</span>m

                </li>

                <li>

                    速度：<span id="speed">0</span>m/s

                </li>

            </ul>

            <div class="center">

                <button id="btn" onclick="toggleBtn()">

                    开始记录

                </button>

            </div>

        </div>

        <script>

            //前一次获取的经度

            var oldLong;

            //前一次获取纬度

            var oldLat;

            //最新获取的经度

            var currentLong;

            //最新获取的纬度

            var currentLat;

            //获取地理位置

            function getLocation() {

                if (navigator.geolocation) {

                    var watchID = navigator.geolocation.watchPosition(showPosition, showError, options);

                } else {

                    alert("对不起，您的浏览器不支持HTML5地理定位API");

                }

            }

            //回调函数，用于接收获取的经纬度以及描述信息

            function showPosition(position) {

                //更新经纬度数据

                if (currentLong != null && currentLat != null) {

                    oldLong = currentLong;

                    oldLat = currentLat;

                }

                currentLong = position.coords.longitude;

                currentLat = position.coords.latitude;

                alert(currentLong + "," + currentLat);

                //更新经度

                var long = document.getElementById("long");

                long.innerHTML = currentLong;

                //更新纬度

                var lat = document.getElementById("lat");

                lat.innerHTML = currentLat;

                //更新位置精确度

                var acc = document.getElementById("acc");

                acc.innerHTML = position.coords.accuracy;

                //更新海拔高度

                var alt = document.getElementById("alt");

                alt.innerHTML = position.coords.altitude;

                //更新速度

                var speed = document.getElementById("speed");

                speed = position.coords.speed;

                //更新运动距离

                if (oldLat != null && oldLong != null) {

                    //计算本次运行的距离

                    var d = getDistance(currentLat, currentLong, oldLat, oldLong);

                    //获取页面上目前的总距离

                    var lastDistance = document.getElementById("distance").innerHTML;

                    alert(d);

                    //将总距离加上本次运动的距离，再更新到页面上

                    document.getElementById("distance").innerHTML = parseFloat(lastDistance) + d;

                }

            }

            //回调函数，用于接收获取失败时的错误代码

            function showError(error) {

                switch(error.code) {

                case error.PERMISSION_DENIED:

                    alert("用户拒绝了地理定位的请求。");

                    break;

                case error.POSITION_UNAVAILABLE:

                    alert("位置信息不可用。");

                    break;

                case error.TIMEOUT:

                    alert("请求超时。");

                    break;

                case error.UNKNOWN_ERROR:

                    alert("未知错误发生。");

                    break;

                }

            }

            //定位参数设置

            var options = {

                enableHighAccuracy : true,

                timeout : 2000,

                maximunAge : 2000

            };

            //当前运动状态，true为正在运动，false为没有运动

            var isRunning = false;

            //显示运动开始时间的<span>对象

            var start_time = document.getElementById("start_time");

            //显示运动结束时间的<span>对象

            var end_time = document.getElementById("end_time");

            function toggleBtn() {

                var btn = document.getElementById("btn");

                //开始运动

                if (!isRunning) {

                    //获取当前时间对象

                    var now = new Date();

                    //更新开始时间信息

                    start_time.innerHTML = now.toLocaleString();

                    //清空结束时间信息

                    end_time.innerHTML = "";

                    //更新运动状态为true，表示正在运动

                    isRunning = true;

                    //更新按钮上的文字内容

                    btn.innerHTML = "完成记录";

                    //运动总距离清零

                    document.getElementById("distance").innerHTML = "0";

                    //开始定位

                    getLocation();

                }

                //结束运动

                else {

                    //更新运动状态为false，表示结束运动

                    isRunning = false;

                    //更新按钮上的文字内容

                    btn.innerHTML = "开始记录";

                    //获取当前时间对象

                    var now = new Date();

                    //更新结束时间信息

                    end_time.innerHTML = now.toLocaleString();

                }

            }

            //角度转换为弧度

            function toRadians(degree) {

                return degree * Math.PI / 180;

            }

            //计算两个坐标点之间的距离

            function getDistance(lat1, long1, lat2, long2) {

                // 地球的半径（单位：公里）

                var R = 6371;

                //角度转换为弧度

                var deltaLat = toRadians(lat2 - lat1);

                var deltaLong = toRadians(long2 - long1);

                lat1 = toRadians(lat1);

                lat2 = toRadians(lat2);

                //计算过程

                var h = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) + Math.cos(lat1) * Math.cos(lat2) * Math.sin(deltaLong / 2) * Math.sin(deltaLong / 2);

                //求距离

                var d = 2 * R * Math.asin(Math.sqrt(h));

                return d;

            }

        </script>

    </body>

</html>

HTML5运动数据记录页面的设计与实现：

HTML5地理定位(已知经纬度，计算两个坐标点之间的距离)的更多相关文章

  1. java通过经纬度计算两个点的之间的距离的算法

    通过两个点的经纬度计算距离 从google maps的脚本里扒了段代码,没准啥时会用上.大家一块看看是怎么算的. private const double EARTH_RADIUS = 6378.13 ...

  2. 计算两个latitude-longitude点之间的距离？ (Haversine公式)

    问题描述 如何计算纬度和经度指定的两点之间的距离?为了澄清,我想要距离公里;这些点使用WGS84系统,我想了解可用方法的相对准确性.最佳解决方案 这个link可能对您有帮助,因为它详细说明了使用Hav ...

  3. mysql实现经纬度计算两个坐标之间的距离sql语句

    select *,(2 * 6378.137* ASIN(SQRT(POW(SIN(PI()*(111.86141967773438-latitude)/360),2)+COS(PI()*33.070 ...

  4. mysql实现经纬度计算两个坐标之间的距离

    DELIMITER $$CREATE DEFINER = CURRENT_USER FUNCTION `getDistance`(`lon1` float,`lat1` float,`lon2` fl ...

  5. 【机器学习实战】计算两个矩阵的成对距离（pair-wise distances）

    矩阵中每一行是一个样本,计算两个矩阵样本之间的距离,即成对距离(pair-wise distances),可以采用 sklearn 或 scipy 中的函数,方便计算. sklearn: sklear ...

  6. PHP计算两个已知经纬度之间的距离

    /** *求两个已知经纬度之间的距离,单位为千米 *@param lng1,lng2 经度 *@param lat1,lat2 纬度 *@return float 距离,单位千米 **/ privat ...

  7. 基于浏览器的HTML5地理定位

    基于浏览器的HTML5地理定位 地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用.今天这篇文章向大家介绍一下 HTML ...

  8. php计算两个坐标（经度，纬度）之间距离的方法

    本文实例讲述了php计算两个坐标(经度,纬度)之间距离的方法.分享给大家供大家参考.具体如下: 这里使用php计算两个坐标(经度,纬度)之间的距离,返回结果为米或者千米 function distan ...

  9. Java计算两个字符串日期之间的天数差

    Java计算两个字符串日期之间的天数差 调用方法: public static void main(String[] args) throws ParseException { String a = ...

随机推荐

  1. eclipse中部署项目到tomcat启动，一直是starting状态

    这个问题主要是在eclipse中设置了proxy代理导致的,将Network Connections中的Active Provider更改即可! 打赏

  2. Gogs的Docker容器化部署流程遇到的问题

    Gogs的Docker容器化部署流程遇到的问题   最近在学习CI/CD的一些方案,个人比较青睐容器化轻量级.CI方面一开始是想使用gitlab的,但是发现我自己买的服务器配置太低,内存根本不够(大写 ...

  3. H5与native 普及

    H5与native 普及: H5是基于web,native基于客户端native是使用原生系统内核的,相当于直接在系统上操作.,是我们传统意义上的软件,更加稳定.但是H5的APP先得调用系统的浏览器内 ...

  4. CentOS7利用docker安装MySQL5.7

    CentOS7利用docker安装MySQL5.7 前提条件 centos7 且内核版本高于3.10, 可通过以下命令查看内核版本 uname -r 利用yum 安装docker 安装一些必要的系统工 ...

  5. c#中转义字符\n和\r的区别

    在c#中\n代表换行,\r代表回车,但\r是把后面的字符覆盖前面的,例: "1234\n567" 输出的是 1234 567 "1234\r567"输出的是 5 ...

  6. LoadRunner使用记录

    基本术语 性能测试--通过自动化的测试工具模拟多种正常.峰值以及异常负载条件来对系统的各项性能指标进行测试. 负载测试和压力测试都属于性能测试,两者可以结合进行. 负载测试,确定在各种工作负载下系统的 ...

  7. eclipse查看jar包源代码乱码问题解决

    文章来源 今天在eclipse中查看java的jar包中的源代码时,显示的全部是乱码.起初只设置了content types还不行,还是乱码.不过问题最后解决了,配置步骤如下: 首先要知道你需要配置的 ...

  8. 升级openssh编译报错“configure: error: *** working libcrypto not found, check config.log”的解决办法

    问题描述 在linux上,欲将OpenSSH_6.4p1编译升级到OpenSSH_8.0p1时,执行了./configure --prefix=/usr --sysconfdir=/etc/ssh - ...

  9. CentOS7.5升级OpenSSH

    实验环境 OS:CentOS 7.5 当前openssh版本:OpenSSH_7.4p1 升级后的openssh版本:OpenSSH_8.0p1 开通telnet 为了防止升级过程中ssh断连,保险起 ...

  10. 2019-08-05 纪中NOIP模拟B组

    T1 [JZOJ1432] 输油管道 题目描述 请你帮忙设计一个从城市M到城市Z的输油管道,现在已经把整个区域划分为R行C列,每个单元格可能是空的也可能是以下7种基本管道之一: 油从城市M流向Z,‘+ ...