1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>HTML5 Geolocation距离跟踪器</title>
  5. </head>
  6.  
  7. <body onload="loadDemo()">
  8.  
  9. <h1>HTML5 Geolocation距离跟踪器</h1>
  10.  
  11. <p id="status">该浏览器不支持HTML5 Geolocation。</p>
  12.  
  13. <h2>当前位置：</h2>
  14. <table border="1">
  15. <tr>
  16. <td width="40" scope="col">纬度</th>
  17. <td width="114" id="latitude">?</td>
  18. </tr>
  19. <tr>
  20. <td>经度</td>
  21. <td id="longitude">?</td>
  22. </tr>
  23. <tr>
  24. <td>准确度</td>
  25. <td id="accuracy">?</td>
  26. </tr>
  27. </table>
  28.  
  29. <h4 id="currDist">本次移动距离：0 千米</h4>
  30. <h4 id="totalDist">总计移动距离：0 千米</h4>
  31.  
  32. <script type="text/javascript">
  33.  
  34.     var totalDistance = 0.0;
  35.     var lastLat;
  36.     var lastLong;
  37.  
  38.     function toRadians(degree) {
  39.       return this * Math.PI / 180;
  40.     }
  41.  
  42.     function distance(latitude1, longitude1, latitude2, longitude2) {
  43.       // R是地球半径（KM）
  44.       var R = 6371;
  45.  
  46.       var deltaLatitude = toRadians(latitude2-latitude1);
  47.       var deltaLongitude = toRadians(longitude2-longitude1);
  48.       latitude1 = toRadians(latitude1);
  49.       latitude2 = toRadians(latitude2);
  50.  
  51.       var a = Math.sin(deltaLatitude/2) *
  52.               Math.sin(deltaLatitude/2) +
  53.               Math.cos(latitude1) *
  54.               Math.cos(latitude2) *
  55.               Math.sin(deltaLongitude/2) *
  56.               Math.sin(deltaLongitude/2);
  57.  
  58.       var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  59.       var d = R * c;
  60.       return d;
  61.     }
  62.  
  63.     function updateStatus(message) {
  64.         document.getElementById("status").innerHTML = message;
  65.     }
  66.  
  67.     function loadDemo() {
  68.         if(navigator.geolocation) {
  69.             updateStatus("浏览器支持HTML5 Geolocation。");
  70.             navigator.geolocation.watchPosition(updateLocation, handleLocationError, {maximumAge:20000});
  71.         }
  72.     }
  73.  
  74.     function updateLocation(position) {
  75.         var latitude = position.coords.latitude;
  76.         var longitude = position.coords.longitude;
  77.         var accuracy = position.coords.accuracy;
  78.  
  79.         document.getElementById("latitude").innerHTML = latitude;
  80.         document.getElementById("longitude").innerHTML = longitude;
  81.         document.getElementById("accuracy").innerHTML = accuracy;
  82.  
  83.         // 如果accuracy的值太大，我们认为它不准确，不用它计算距离
  84.         if (accuracy >= 500) {
  85.             updateStatus("这个数据太不靠谱，需要更准确的数据来计算本次移动距离。");
  86.             return;
  87.         }
  88.  
  89.         // 计算移动距离
  90.  
  91.         if ((lastLat != null) && (lastLong != null)) {
  92.             var currentDistance = distance(latitude, longitude, lastLat, lastLong);
  93.             document.getElementById("currDist").innerHTML =
  94.               "本次移动距离：" + currentDistance.toFixed(4) + " 千米";
  95.  
  96.             totalDistance += currentDistance;
  97.  
  98.             document.getElementById("totalDist").innerHTML =
  99.               "总计移动距离：" + currentDistance.toFixed(4) + " 千米";
  100.         }
  101.  
  102.         lastLat = latitude;
  103.         lastLong = longitude;
  104.  
  105.         updateStatus("计算移动距离成功。");
  106.     }
  107.  
  108.     function handleLocationError(error) {
  109.         switch(error.code)
  110.         {
  111.         case 0:
  112.           updateStatus("尝试获取您的位置信息时发生错误：" + error.message);
  113.           break;
  114.         case 1:
  115.           updateStatus("用户拒绝了获取位置信息请求。");
  116.           break;
  117.         case 2:
  118.           updateStatus("浏览器无法获取您的位置信息：" + error.message);
  119.           break;
  120.         case 3:
  121.           updateStatus("获取您位置信息超时。");
  122.           break;
  123.         }
  124.     }
  125.  
  126. </script>
  127. </body>
  128. </html>
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <style>
  5.       #tripmeter {
  6.         border: 3px double black;
  7.         padding: 10px;
  8.         margin: 10px 0;
  9.       }
  10.  
  11.       p {
  12.         color: #222;
  13.         font: 14px Arial;
  14.       }
  15.  
  16.       span {
  17.         color: #00C;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div id="tripmeter">
  23.       <p>
  24.         Starting Location (lat, lon):<br/>
  25.         <span id="startLat">???</span>&deg;, <span id="startLon">???</span>&deg;
  26.       </p>
  27.       <p>
  28.         Current Location (lat, lon):<br/>
  29.         <span id="currentLat">???</span>&deg;, <span id="currentLon">???</span>&deg;
  30.       </p>
  31.       <p>
  32.         Distance from starting location:<br/>
  33.         <span id="distance">0</span> km
  34.       </p>
  35.     </div>
  36.     <script>
  37.       window.onload = function() {
  38.         var startPos;
  39.  
  40.         if (navigator.geolocation) {
  41.           navigator.geolocation.getCurrentPosition(function(position) {
  42.             startPos = position;
  43.             document.getElementById("startLat").innerHTML = startPos.coords.latitude;
  44.             document.getElementById("startLon").innerHTML = startPos.coords.longitude;
  45.           }, function(error) {
  46.             alert("Error occurred. Error code: " + error.code);
  47.             // error.code can be:
  48.             //   0: unknown error
  49.             //   1: permission denied
  50.             //   2: position unavailable (error response from locaton provider)
  51.             //   3: timed out
  52.           });
  53.  
  54.           navigator.geolocation.watchPosition(function(position) {
  55.             document.getElementById("currentLat").innerHTML = position.coords.latitude;
  56.             document.getElementById("currentLon").innerHTML = position.coords.longitude;
  57.             document.getElementById("distance").innerHTML =
  58.               calculateDistance(startPos.coords.latitude, startPos.coords.longitude,
  59.                                 position.coords.latitude, position.coords.longitude);
  60.           });
  61.         }
  62.       };
  63.  
  64.       // Reused code - copyright Moveable Type Scripts - retrieved May 4, 2010.
  65.       // http://www.movable-type.co.uk/scripts/latlong.html
  66.       // Under Creative Commons License http://creativecommons.org/licenses/by/3.0/
  67.       function calculateDistance(lat1, lon1, lat2, lon2) {
  68.         var R = 6371; // km
  69.         var dLat = (lat2-lat1).toRad();
  70.         var dLon = (lon2-lon1).toRad();
  71.         var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
  72.                 Math.cos(lat1.toRad()) * Math.cos(lat2.toRad()) *
  73.                 Math.sin(dLon/2) * Math.sin(dLon/2);
  74.         var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  75.         var d = R * c;
  76.         return d;
  77.       }
  78.       Number.prototype.toRad = function() {
  79.         return this * Math.PI / 180;
  80.       }
  81.  
  82.     </script>
  83.   </body>
  84. </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. Upgrading to Java 8——第四章 The Stream API

    在这章中我们将学习Stream API,在JDK 8 中的一项新的特性.为了理解这一章的主题,你需要知道如何使用Lambda表达式和java.util.function里的预定义的函数式接口. 一个S ...

  2. An overview of the Spring MVC request flow

    The Spring MVC request flow in short: When we enter a URL in the browser, the request comes to the d ...

  3. Codeforces Round #254 (Div. 1) C. DZY Loves Colors 线段树

    题目链接: http://codeforces.com/problemset/problem/444/C J. DZY Loves Colors time limit per test:2 secon ...

  4. SVN--（Eclipse）在历史记录中比较版本差异

    前言 在SVN中比较各版本的差异是非常重要的功能. 方式 看图说话 结果

  5. hdu 1548 A strange lift 宽搜bfs+优先队列

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1548 There is a strange lift.The lift can stop can at ...

  6. HDU 2196 求树上所有点能到达的最远距离

    其实我不是想做这道题的...只是今天考试考了一道类似的题...然后我挂了... 但是乱搞一下还是有80分....可惜没想到正解啊! 所以今天的考试题是: 巡访 (path.pas/c/cpp) Cha ...

  7. 【BZOJ】【2301】problem b

    莫比乌斯反演/容斥原理 Orz PoPoQQQ PoPoQQQ莫比乌斯函数讲义第一题. for(i=1;i<=n;i=last+1){ last=min(n/(n/i),m/(m/i)); …… ...

  8. 微信连WiFi关注公众号流程更新 解决ios微信扫描二维码不关注就能上网的问题

    前几天鼓捣了一下微信连WiFi功能,设置还蛮简单的,但ytkah发现如果是ios版微信扫描微信连WiFi生成的二维码不用关注公众号就可以直接上网了,而安卓版需要关注公众号才能上网,这样就少了很多ios ...

  9. CkEditor 插件开发

    CKEditor的插件开发其实很简单只需要两步.1.通过CKEditor.plugins.add()方法编写插件的逻辑主体, 2.告诉CKEditor我们有一个自定义插件需要添加进来. //创建插件逻 ...

  10. 使用行为树(Behavior Tree)实现网游奖励掉落系统

    原地址:http://blog.csdn.net/akara/article/details/6165421 [原创]使用行为树(Behavior Tree)实现网游奖励掉落系统by AKara 20 ...