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

下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离。半正矢公式也成为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. jquery tagsinput监听输入、修改、删除事件

    个人博客 地址:http://www.wenhaofan.com/article/20181118192458 由于度娘上的根本搜不到对应的操作,连该插件对应的文档介绍都没有,不得已debug了源码才 ...

  2. 题解【AcWing177】噩梦

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

  3. Linux零碎002

    1.if else就近原则: 2.指针位数与机器地址总线宽度一致: 3.数组即常量指针,用法和指针类似,在操作指针时:p与&p[0]含义一样: 4.编译器按照内存递减的方式来分配变量.

  4. Tomcat 加载外部dll时如何配置

    1.在myeclipse环境下配置 先将dll放置在c:\windows\system32中,然后在myEclipse中,window->Preferences->MyEclipse-&g ...

  5. please execute the cleanup command

    解决方法: (1)用dos命令进入项目文件夹,运行svn cleanup:不要直接右键点击找cleanup选项 (2)到上一层目录去cleanup试下,或者到.svn文件夹下(隐藏的)找到所有的loc ...

  6. 电脑出现kernelbase.dll错误的两种解决方法

    KernelBase.dll是Windows操作系统的重要文件,它为各种应用程序提供服务.如果电脑提示kernelbase.dll错误,这该怎么处理?大家可以用电脑自带的防火墙或者是第三方软件来进行故 ...

  7. spring项目中 通过自定义applicationContext工具类获取到applicationContext上下文对象

    spring项目在服务器启动的时候 spring容器中就已经被创建好了各种对象,在我们需要使用的时候可以进行调用. 工具类代码如下 import org.springframework.beans.B ...

  8. 字符串UTF-8和GBK之间的转换以及判定

    一.判定字符串是否是UTF-8的编码 bool is_str_utf8(const char* str) { unsigned ;//UFT8可用1-6个字节编码,ASCII用一个字节 unsigne ...

  9. sendmail邮件服务器

    安装sendmail之前 我们要先搭建一个DNS服务器用来解析邮件 下图是配置好的DNS正向解析记录和反向解析记录 正向 反向 DNS配置好之后我们就来安装sendmail服务 然后再安装sendma ...

  10. UI布局 自定义布局

    今天学习了UI布局当中的自定义的布局的部分,在开始的时候先动手写了一个跟随手指移动的小兔子的实例,初步的了解了布局管理器的概念之后开始正式进行布局管理器,其中包括相对布局,线性布局,帧布局,表格布局, ...