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

下面介绍如何利用正矢公式计算已知经纬度数据的两个坐标点之间的距离。半正矢公式也成为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. 5G将至，4G降速：是谣言还是真相？

    畅用移动智能终端设备,早已成为大众日常生活中的一部分.卫报专栏作家伯克曼提到,"据估计,70%的人会抱着手机或iPad刷资讯入睡."当移动智能终端变得如此重要时,与之息息相关的网络 ...

  2. python实现进度条下载

    核心代码: for i in range(10): print('\r' + '>' * i, end='') 示例展示以搜狗输入法为例: import timeimport requestsi ...

  3. Django学习笔记4

    Referto https://docs.djangoproject.com/zh-hans/2.2/intro/tutorial04/ Since we have the abstract conc ...

  4. cmake编译升级

    cmake的升级依赖于gcc版本,例如cmake 3.15.3依赖与gcc 4.8以上的版本 1)先升级gcc到4.8 参考:https://blog.csdn.net/Kangshuo2471781 ...

  5. Linux命令 sleep 延迟

    用途说明 sleep命令常用于在Linux shell脚本中延迟时间 常用方式 注意:以下用法中<n>可以为小数. 格式:sleep <n> 格式:sleep <n> ...

  6. [CF]Round513

    A Phone Numbers 题意:定义"电话号码"为开头为'8',长度为11的字符串.给定一些字符,每个字符只能用一次,求可以拼出多少个电话号码(可以重复). 直接min(st ...

  7. django 搭建一个投票类网站（一）

    写在最前,之前零零散散的看过django,但是由于比较杂,学的云里雾里的,所以就停了一段落,但是我最近找到了一个django的书,是李建编著的django入门与实践,于是,打算照着书上的步骤来写好一个 ...

  8. Maven项目中配置文件导出问题

    1.将该设置写在pom.xml中 <build> <resources> <resource> <directory>src/main/resource ...

  9. C++-POJ2352-Stars[数据结构][树状数组]

    /* 虽然题目没说,但是读入有以下特点 由于,输入是按照按照y递增,如果y相同则x递增的顺序给出的 所以,可以利用入读的时间进行降为处理 */ 于是我们就得到了一个一维的树状数组解法啦 值得一提:坐标 ...

  10. nuxt导入css样式

    全局导入,适用于所有组件 在nuxt.config.js文件引 css:["~样式path"], 如:css:["~assets/css/main.css"], ...