1.  <body onLoad="loadDemo()">
  2.      <header>
  3.          <h1>oldmeter演示</h1>
  4.          <h4>距离跟踪器</h4>
  5.      </header>
  6.      <section>
  7.           <article>
  8.               <header>
  9.                  <h1>你的位置</h1>
  10.                  <p class="info" id="status">地理位置是不是在你的浏览器支持。</p>
  11.                  <div class="geostatus">
  12.                      <p id="latitude">纬度:</p>
  13.                      <p id="longitude">经度:</p>
  14.                      <p id="accuracy">精度:</p>
  15.                      <p id="altitude">海拔：</p>
  16.                      <p id="altitudeAccuracy">海拔精度：</p>
  17.                      <p id="heading">行进方向、相对于正北：</p>
  18.                      <p id="speed">速度(m/s):</p>
  19.                      <p id="timestamp">时间戳:</p>
  20.                      <p id="currDist">目前距离旅行：</p>
  21.                      <p id="totalDist">总距离：</p>
  22.                   </div>
  23.              </header>
  24.           </article>
  25.      </section>
  26.      <footer>
  27.          <h2>使用HTML5，和你的脚！</h2>
  28.      </footer>
  29.      <script type="text/javascript">
  30.          var totalDistance=0.0;
  31.          var lastLat;
  32.          var lastLong;
  33.  
  34.          Number.prototype.toRadians=function(){
  35.              return this * Math.PI/;
  36.              }
  37.  
  38.          function distance(latitude1,longitude1,latitude2,longitude2){
  39.              var R=;//R是地球半径，单位是km
  40.              var deltalatitude=(latitude2-latitude1).toRadians();
  41.              var deltaLongitude=(longitude2-longitude1).toRadians();
  42.              latitude1=latitude1.toRadians();
  43.              latitude2=latitude2.toRadians();
  44.  
  45.              var a=Math.sin(deltalatitude/) *
  46.                    Math.sin(deltalatitude/) +
  47.                    Math.cos(latitude1) *
  48.                    Math.cos(latitude2) *
  49.                    Math.sin(deltaLongitude/) *
  50.                    Math.sin(deltaLongitude/);
  51.              var c=*Math.atan2(Math.sqrt(a),Math.sqrt(-a));
  52.              var d=R*c;
  53.              return d;
  54.  
  55.          }
  56.  
  57.          function updateErrorStatus(message){
  58.              document.getElementById("status").style.background="papayaWhip";
  59.              document.getElementById("status").innerHTML="<strong>Error</strong>:"+message;
  60.  
  61.          }
  62.  
  63.          function updateStatus(message){
  64.              document.getElementById("status").style.background="paleGreen";
  65.              document.getElementById("status").innerHTML=message;
  66.  
  67.          }
  68.  
  69.          function loadDemo(){
  70.              //检查浏览器是否支持geolocation
  71.              if(navigator.geolocation){
  72.                  document.getElementById("status").innerHTML="在你的浏览器支持HTML5 Geolocation";
  73.                  navigator.geolocation.watchPosition(updateLocation,handleLocationError,{timeout:});
  74.              }
  75.          }
  76.  
  77.          function updateLocation(position){
  78.  
  79.              var latitude=position.coords.latitude;//纬度
  80.              var longitude=position.coords.longitude;//经度
  81.              var accuracy=position.coords.accuracy;//精度(准确度）单位米
  82.              var altitude=position.coords.altitude;//海拔
  83.              var altitudeAccuracy=position.coords.altitudeAccuracy;//海拔精度 单位米
  84.              var heading=position.coords.heading;//行进方向、相对于正北
  85.              var speed=position.coords.speed;//速度m/s
  86.              var timestamp=position.timestamp;//时间戳
  87.  
  88.              document.getElementById("latitude").innerHTML="北纬度："+latitude;
  89.              document.getElementById("longitude").innerHTML="东经度："+longitude;
  90.              document.getElementById("accuracy").innerHTML="精度："+accuracy+"米";
  91.              document.getElementById("altitude").innerHTML="海拔："+altitude+"米";
  92.              document.getElementById("altitudeAccuracy").innerHTML="海拔精度："+altitudeAccuracy;
  93.              document.getElementById("heading").innerHTML="行进方向："+heading;
  94.              document.getElementById("speed").innerHTML="速度："+speed+"米";
  95.              document.getElementById("timestamp").innerHTML="时间戳："+timestamp;
  96.  
  97.              //合理性检查...如果accuracy的值太大就不要计算距离了
  98.              if(accuracy>=){
  99.  
  100.                  updateStatus("需要更精确的值来计算距离");
  101.                  return;
  102.              }
  103.  
  104.              if((lastLat !=null)&&(lastLong !=null)){
  105.                  var currentDistance =distance(latitude,longitude,lastLat,lastLong);
  106.  
  107.                  document.getElementById("currDist").innerHTML="目前距离旅行"+currentDistance.toFixed()+"km";
  108.                  totalDistance +=currentDistance;
  109.                  document.getElementById("totalDist").innerHTML="总距离"+currentDistance.toFixed()+"km";
  110.  
  111.                  updateStatus("位置成功更新。");
  112.                  lastLong=longitude;
  113.              }
  114.          }
  115.  
  116.          //错误处理
  117.          function handleLocationError(error){
  118.              switch(error.code){
  119.                  case :
  120.                      updateErrorStatus("有一个错误在获取你的位置:错误信息"+error.message);
  121.                  break;
  122.                  case :
  123.                      updateErrorStatus("用户选择不分享他或她的位置。");
  124.                  break;
  125.                  case :
  126.                      updateErrorStatus("浏览器无法确定自己的位置,错误信息"+error.message);
  127.                  break;
  128.                  case :
  129.                      updateErrorStatus("在检索位置之前，浏览器超时。");
  130.                  break;
  131.              }
  132.          }
  133.      </script>
  134.  </body>

HTML5-新API-geolocation-实例-距离跟踪器的更多相关文章

  1. HTML5新api即pushState和replaceState实现无刷新修改url

    1,首先我面临一个需求,页面回退时需要知道来之前的页面状态.很简单,回退时在url里赋参数即可.问题是在ipad上,回退按钮是安卓那边的,我控制不了.只好采用js无刷新修改url历史记录,来告诉服务器 ...

  2. 用HTML5 Geolocation实现一个距离追踪器

    HTML5 Geolocation(地理定位)用于定位用户的位置.那么如何实现一个距离追踪器呢?我的思路是这样的,前提是浏览器支持h5地理定位,在这个基础上,获取用户位置,更新用户位置,计算距离,显示 ...

  3. 【转】odoo 新API装饰器中one、model、multi的区别

    http://blog.csdn.net/qq_18863573/article/details/51114893 1.one装饰器详解 odoo新API中定义方式: date=fields.Date ...

  4. HTML5新特性之移动设备API

    为了更好地为移动设备服务,HTML5推出了一系列针对移动设备的API. 1.Geolocation API Geolocation接口用于获取用户的地理位置.它使用的方法基于GPS或者其他机制(比如I ...

  5. HTML5新特性之CSS+HTML5实例

    1.新的DOCTYPE和字符集 HTML5的一项准则就是化繁为简,Web页面的DOCTYPE被极大的简化. <!DOCTYPE html> 同时字符集声明也被简化了: <meta c ...

  6. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  7. 《Entity Framework 6 Recipes》中文翻译系列 (45) ------ 第八章 POCO之获取原始对象与手工同步对象图和变化跟踪器

    翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 8-6  获取原始对象 问题 你正在使用POCO,想从数据库获取原始对象. 解决方案 ...

  8. HTML5新特性及详解

    什么是HTML5:HTML5 是下一代的HTML,将成为 HTML.XHTML 以及 HTML DOM 的新标准. 为 HTML5 建立的一些规则: 新特性应该基于 HTML.CSS.DOM 以及 J ...

  9. 通过新的 Azure 媒体服务资源管理器工具管理媒体工作流

    Xavier Pouyat    Azure 媒体服务高级项目经理 几个月前,一家广播公司找到了我,希望我向他们提供一种图形界面工具,好让他们使用 Azure媒体服务来上传.管理资产并对资产进行编 ...

随机推荐

  1. CF 120F Spider 树的直径 简单题

    一个男孩有n只玩具蜘蛛,每只蜘蛛都是一个树的结构,现在男孩准备把这n只小蜘蛛通过粘贴节点接在一起,形成一只大的蜘蛛.大的蜘蛛也依然是树的结构.输出大的蜘蛛的直径. 知识: 树的直径是指树上的最长简单路 ...

  2. UNIX网络编程

    UNIX网络编程--socket的keep http://www.68idc.cn/help/opersys/unixbsd/20150731471448.html

  3. 30天轻松学习javaweb_Range实现断点续传

    package com.wzh.test.http; import java.io.FileOutputStream; import java.io.IOException; import java. ...

  4. Struts中<s:checkboxlist>的用法

    一.JSP中 ①集合为list <s:checkboxlist name="list" list="{'Java','.Net','RoR','PHP'}" ...

  5. [ActionScript 3.0] Away3D 官网实例

    /* Dynamic tree generation and placement in a night-time scene Demonstrates: How to create a height ...

  6. Servlet中的配置 web.xml

    url-pattern配置 可以为同一个Servlet配置多个url-pattern: <servlet> <servlet-name>DoGetPostDemo</se ...

  7. 查看.netframeword版本

    打开“我的电脑“,在地址栏输入 %systemroot%\Microsoft.NET\Framework

  8. 微信中得到的GPS经纬度放在百度,腾迅地图中不准的原因及处理

    微信中可以得到两种GPS坐标信息  默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02' 一种是全球的正常GPS坐标信息 wgs84 . GPS,W ...

  9. [技巧]把Excel里的数据插入到数据库里的方法

    .如果先在6行数据的最后一列在插入一列数据,请先把列名写好,然后再第一行的该列下输入数字, 然后选中该单元格向下拖拽一个单元格然后就能看到黑色的小框, 双击右下角黑色的小点,6行数据就 会填上默认的第 ...

  10. [HDU 4082] Hou Yi's secret (简单计算几何)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4082 题目大意: 给你n个点,问能最多构成多少个相似三角形. 用余弦定理,计算三个角度,然后暴力数有多 ...