<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>HTML5 Geolocation距离跟踪器</title>

</head>

<body onload="loadDemo()">

<h1>HTML5 Geolocation距离跟踪器</h1>

<p id="status">该浏览器不支持HTML5 Geolocation。</p>

<h2>当前位置：</h2>

<table border="1">

<tr>

<td width="40" scope="col">纬度</th>

<td width="114" id="latitude">?</td>

</tr>

<tr>

<td>经度</td>

<td id="longitude">?</td>

</tr>

<tr>

<td>准确度</td>

<td id="accuracy">?</td>

</tr>

</table>

<h4 id="currDist">本次移动距离：0 千米</h4>

<h4 id="totalDist">总计移动距离：0 千米</h4>

<script type="text/javascript">

    var totalDistance = 0.0;

    var lastLat;

    var lastLong;

    function toRadians(degree) {

      return this * Math.PI / 180;

    }

    function distance(latitude1, longitude1, latitude2, longitude2) {

      // R是地球半径（KM）

      var R = 6371;

      var deltaLatitude = toRadians(latitude2-latitude1);

      var deltaLongitude = toRadians(longitude2-longitude1);

      latitude1 = toRadians(latitude1);

      latitude2 = toRadians(latitude2);

      var a = Math.sin(deltaLatitude/2) *

              Math.sin(deltaLatitude/2) +

              Math.cos(latitude1) *

              Math.cos(latitude2) *

              Math.sin(deltaLongitude/2) *

              Math.sin(deltaLongitude/2);

      var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

      var d = R * c;

      return d;

    }

    function updateStatus(message) {

        document.getElementById("status").innerHTML = message;

    }

    function loadDemo() {

        if(navigator.geolocation) {

            updateStatus("浏览器支持HTML5 Geolocation。");

            navigator.geolocation.watchPosition(updateLocation, handleLocationError, {maximumAge:20000});

        }

    }

    function updateLocation(position) {

        var latitude = position.coords.latitude;

        var longitude = position.coords.longitude;

        var accuracy = position.coords.accuracy;

        document.getElementById("latitude").innerHTML = latitude;

        document.getElementById("longitude").innerHTML = longitude;

        document.getElementById("accuracy").innerHTML = accuracy;

        // 如果accuracy的值太大，我们认为它不准确，不用它计算距离

        if (accuracy >= 500) {

            updateStatus("这个数据太不靠谱，需要更准确的数据来计算本次移动距离。");

            return;

        }

        // 计算移动距离

        if ((lastLat != null) && (lastLong != null)) {

            var currentDistance = distance(latitude, longitude, lastLat, lastLong);

            document.getElementById("currDist").innerHTML =

              "本次移动距离：" + currentDistance.toFixed(4) + " 千米";

            totalDistance += currentDistance;

            document.getElementById("totalDist").innerHTML =

              "总计移动距离：" + currentDistance.toFixed(4) + " 千米";

        }

        lastLat = latitude;

        lastLong = longitude;

        updateStatus("计算移动距离成功。");

    }

    function handleLocationError(error) {

        switch(error.code)

        {

        case 0:

          updateStatus("尝试获取您的位置信息时发生错误：" + error.message);

          break;

        case 1:

          updateStatus("用户拒绝了获取位置信息请求。");

          break;

        case 2:

          updateStatus("浏览器无法获取您的位置信息：" + error.message);

          break;

        case 3:

          updateStatus("获取您位置信息超时。");

          break;

        }

    }

</script>

</body>

</html>
<!DOCTYPE html>

<html>

  <head>

    <style>

      #tripmeter {

        border: 3px double black;

        padding: 10px;

        margin: 10px 0;

      }

      p {

        color: #222;

        font: 14px Arial;

      }

      span {

        color: #00C;

      }

    </style>

  </head>

  <body>

    <div id="tripmeter">

      <p>

        Starting Location (lat, lon):<br/>

        <span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg;

      </p>

      <p>

        Current Location (lat, lon):<br/>

        <span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg;

      </p>

      <p>

        Distance from starting location:<br/>

        <span id="distance">0</span> km

      </p>

    </div>

    <script>

      window.onload = function() {

        var startPos;

        if (navigator.geolocation) {

          navigator.geolocation.getCurrentPosition(function(position) {

            startPos = position;

            document.getElementById("startLat").innerHTML = startPos.coords.latitude;

            document.getElementById("startLon").innerHTML = startPos.coords.longitude;

          }, function(error) {

            alert("Error occurred. Error code: " + error.code);

            // error.code can be:

            //   0: unknown error

            //   1: permission denied

            //   2: position unavailable (error response from locaton provider)

            //   3: timed out

          });

          navigator.geolocation.watchPosition(function(position) {

            document.getElementById("currentLat").innerHTML = position.coords.latitude;

            document.getElementById("currentLon").innerHTML = position.coords.longitude;

            document.getElementById("distance").innerHTML =

              calculateDistance(startPos.coords.latitude, startPos.coords.longitude,

                                position.coords.latitude, position.coords.longitude);

          });

        }

      };

      // Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010.

      // http://www.movable-type.co.uk/scripts/latlong.html

      // Under Creative Commons License http://creativecommons.org/licenses/by/3.0/

      function calculateDistance(lat1, lon1, lat2, lon2) {

        var R = 6371; // km

        var dLat = (lat2-lat1).toRad();

        var dLon = (lon2-lon1).toRad();

        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +

                Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *

                Math.sin(dLon/2) * Math.sin(dLon/2);

        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

        var d = R * c;

        return d;

      }

      Number.prototype.toRad = function() {

        return this * Math.PI / 180;

      }

    </script>

  </body>

</html>​

Html5 Geolocation demo的更多相关文章

  1. HTML5 Geolocation API地理定位整理（二）

    Geolocation 实例demo 1.使用watchPosition()监听客户端位置 var watchOne=null; if (navigator.geolocation) { //watc ...

  2. HTML5 Geolocation用来定位用户的位置。

    HTML5 Geolocation用来定位用户的位置. 定位用户的位置 HTMl5 Geolocation API用来得到用户的地理位置. 由于这个可能和个人隐私相关.除非用户同意否则不能使用. 浏览 ...

  3. HTML5: HTML5 Geolocation（地理定位）

    ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...

  4. HTML5 地理位置定位（HTML5 Geolocation）原理及应用

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

  5. 基于HTML5 geolocation 实现的天气预报功能

    最近一直在学习HTML5,因为8月份要开发手机项目了.所以先把HTML5学习下. 基本思路: 1. 用户未设置任何城市之前,根据HTML5 geolocation 获取用户所在的地理位置. 2. 根据 ...

  6. HTML5 Geolocation 构建基于地理位置的 Web 应用

    HTML5 中的新功能 HTML5 是最新一代的 HTML 规范,是 W3C 与 WHATWG 合作的结果,目前仍外于开发中.自从上一代 HTML4,Web 世界已经发生了巨大的变化,HTML5 的到 ...

  7. html5 geolocation API

    清单 1. 检查浏览器支持性if (navigator.geolocation) 清单 2. 单次定位请求 API void getCurrentPosition(updateLocation, op ...

  8. Qt WebKit and HTML5 geolocation | Qt Project forums | Qt Project

    Qt WebKit and HTML5 geolocation | Qt Project forums | Qt Project Qt WebKit and HTML5 geolocation   I ...

  9. html5 Geolocation(地理位置定位)学习

    1.html5 Geolocation html5 Geolocation API 使用很简单,请求一个位置信息,如果用户同意,浏览器会返回一个位置信息,该位置是通过用户的底层设备(手机,电脑) 提供 ...

随机推荐

  1. MyEclipse 中的各种有的没的快捷方式

    快捷键1 (CTRL) Ctrl+1 快速修复Ctrl+D: 删除当前行  Ctrl+Q  定位到最后编辑的地方  Ctrl+L  定位在某行   Ctrl+O  快速显示 OutLine  Ctrl ...

  2. 【Dancing Link专题】解题报告

    DLX用于优化精确覆盖问题,由于普通的DFS暴力搜索会超时,DLX是一个很强有力的优化手段,其实DLX的原理很简单,就是利用十字链表的快速删除和恢复特点,在DFS时删除一些行和列以减小查找规模,使得搜 ...

  3. 【BZOJ】【3172】【TJOI2013】单词

    AC自动机 Orz zyf 玛雅一开始连题意都没看懂……意思就是给你一篇文章的N个单词,问每个单词在这篇文章中各出现了几次?(这篇文章=N个单词) 那么我们建个AC自动机……对于每个单词来说,它出现的 ...

  4. 【BZOJ】【2084】【POI2010】Antisymmetry

    Manacher算法 啊……Manacher修改一下就好啦~蛮水的…… Manacher原本是找首尾相同的子串,即回文串,我们这里是要找对应位置不同的“反回文串”(反对称?233) 长度为奇数的肯定不 ...

  5. 【转载】c/c++在windows下获取时间和计算时间差的几种方法总结

    一.标准C和C++都可用 1.获取时间用time_t time( time_t * timer ),计算时间差使用double difftime( time_t timer1, time_t time ...

  6. C51关键字

    C51 中的关键字 关键字 用途 说明 auto 存储种类说明 用以说明局部变量,缺省值为此 break 程序语句 退出最内层循环 case 程序语句 Switch语句中的选择项 char 数据类型说 ...

  7. UML状态图（转载）

    概述: 图表本身的名称,阐明该图的目的和其他细节.它描述了在一个系统中的一个组成部分不同的状态.状态是特定的一个系统的组件/对象. 状态图描述了一个状态机.我们阐明的状态机可以被定义为一台机器,它定义 ...

  8. mongodb 主从服务器

    @set mongod=..\bin\mongod.exe set keyFile=key.key if not exist %keyFile% ( echo 123456>%keyFile% ...

  9. WCF Service的Restfull风格

    怎样构建? •您需要什么样的资源? •将使用哪些 URI 表示这些资源? •每个 URI 将支持统一接口的哪些部件(HTTP 动词)?    URI的处理   •UriTemplate –System ...

  10. 开源搜索引擎Solr的快速搭建及集成到企业门户最佳实施方案--转载

    笔者经过研究查阅solr官方相关资料经过两周的研究实现了毫秒级百万数据的搜索引擎的搭建并引入到企业门户.现将实施心得和步骤分享一下. 1.      jdk1.6 安装jdk1.6到系统默认目录下X: ...