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

下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离。半正矢公式也成为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. webpack如何编译ES6打包

    前言:随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢 在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名) 后 ...

  2. Java后端知识体系及路线【最新秘籍】

    第一层(基本语法)   第一层心法,主要都是基本语法,程序设计入门,悟性高者十天半月可成,差一点的 3 到 6 个月也说不准.如果有其他开发语言的功底相助,并且有张无忌的悟性与运气,相信第一层只在片刻 ...

  3. 二分-G - 4 Values whose Sum is 0

    G - 4 Values whose Sum is 0 The SUM problem can be formulated as follows: given four lists A, B, C, ...

  4. python 删除git Jenkinsfile文件

    背景:在做ci集成的发现分支超过100个之后,pipline activity列表中前期的分支会被隐藏,这导致master分支在活动视图中不可见 解决方案:删除历史分支的Jenkinsfile 分支太 ...

  5. PHP程序员应该如何提升

    PHP程序员应该如何提升 尤其不认可W3school之类的东西,不够深度,理解不深,比起这个更建议看官方文档,中文不清楚,看英文的. 入门视频:入门视频推荐:哈佛大学公开课:构建动态网站Beginne ...

  6. 题解【AcWing177】噩梦

    题面 考虑双向广搜. 我们需要记录男孩和女孩的当前位置,并且每次都进行扩展. 记录一个数组 \(st[i][j]\) . 如果 \(st[i][j]=0\) ,说明 \((i,j)\) 还没有被男孩和 ...

  7. [HEOI2016] 字符串 - 后缀数组,主席树,ST表,二分

    [HEOI2016] 字符串 Description 给定一个字符串 \(S\), 有 \(m\) 个询问,每个询问给定参数 \((a,b,c,d)\) ,求 \(s[a..b]\) 的子串与 \(s ...

  8. 剑指offer 面试题56. 数组中只出现一次的两个数字

    题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 方法1:用set记录出现过的数字 class Solution { public: void F ...

  9. MySQL排序查询

    语法:① SELECT 查询 (要找的东西)②FROM 表 (在哪个表找)③[WHERE 筛选条件](取出重要的或有用的)④ORDER BY 排序列表 [ASC|DESC] (排序的关键字 字段)([ ...

  10. .net c# MVC提交表单的4种方法

    https://blog.csdn.net/qingkaqingka/article/details/85047781