<body onLoad="loadDemo()">

     <header>

         <h1>oldmeter演示</h1>

         <h4>距离跟踪器</h4>

     </header>

     <section>

          <article>

              <header>

                 <h1>你的位置</h1>

                 <p class="info" id="status">地理位置是不是在你的浏览器支持。</p>

                 <div class="geostatus">

                     <p id="latitude">纬度:</p>

                     <p id="longitude">经度:</p>

                     <p id="accuracy">精度:</p>

                     <p id="altitude">海拔：</p>

                     <p id="altitudeAccuracy">海拔精度：</p>

                     <p id="heading">行进方向、相对于正北：</p>

                     <p id="speed">速度(m/s):</p>

                     <p id="timestamp">时间戳:</p>

                     <p id="currDist">目前距离旅行：</p>

                     <p id="totalDist">总距离：</p>

                  </div>

             </header>

          </article>

     </section>

     <footer>

         <h2>使用HTML5，和你的脚！</h2>

     </footer>

     <script type="text/javascript">

         var totalDistance=0.0;

         var lastLat;

         var lastLong;

         Number.prototype.toRadians=function(){

             return this * Math.PI/;

             }

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

             var R=;//R是地球半径，单位是km

             var deltalatitude=(latitude2-latitude1).toRadians();

             var deltaLongitude=(longitude2-longitude1).toRadians();

             latitude1=latitude1.toRadians();

             latitude2=latitude2.toRadians();

             var a=Math.sin(deltalatitude/) *

                   Math.sin(deltalatitude/) +

                   Math.cos(latitude1) *

                   Math.cos(latitude2) *

                   Math.sin(deltaLongitude/) *

                   Math.sin(deltaLongitude/);

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

             var d=R*c;

             return d;

         }

         function updateErrorStatus(message){

             document.getElementById("status").style.background="papayaWhip";

             document.getElementById("status").innerHTML="<strong>Error</strong>:"+message;

         }

         function updateStatus(message){

             document.getElementById("status").style.background="paleGreen";

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

         }

         function loadDemo(){

             //检查浏览器是否支持geolocation

             if(navigator.geolocation){

                 document.getElementById("status").innerHTML="在你的浏览器支持HTML5 Geolocation";

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

             }

         }

         function updateLocation(position){

             var latitude=position.coords.latitude;//纬度

             var longitude=position.coords.longitude;//经度

             var accuracy=position.coords.accuracy;//精度(准确度）单位米

             var altitude=position.coords.altitude;//海拔

             var altitudeAccuracy=position.coords.altitudeAccuracy;//海拔精度 单位米

             var heading=position.coords.heading;//行进方向、相对于正北

             var speed=position.coords.speed;//速度m/s

             var timestamp=position.timestamp;//时间戳

             document.getElementById("latitude").innerHTML="北纬度："+latitude;

             document.getElementById("longitude").innerHTML="东经度："+longitude;

             document.getElementById("accuracy").innerHTML="精度："+accuracy+"米";

             document.getElementById("altitude").innerHTML="海拔："+altitude+"米";

             document.getElementById("altitudeAccuracy").innerHTML="海拔精度："+altitudeAccuracy;

             document.getElementById("heading").innerHTML="行进方向："+heading;

             document.getElementById("speed").innerHTML="速度："+speed+"米";

             document.getElementById("timestamp").innerHTML="时间戳："+timestamp;

             //合理性检查...如果accuracy的值太大就不要计算距离了

             if(accuracy>=){

                 updateStatus("需要更精确的值来计算距离");

                 return;

             }

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

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

                 document.getElementById("currDist").innerHTML="目前距离旅行"+currentDistance.toFixed()+"km";

                 totalDistance +=currentDistance;

                 document.getElementById("totalDist").innerHTML="总距离"+currentDistance.toFixed()+"km";

                 updateStatus("位置成功更新。");

                 lastLong=longitude;

             }

         }

         //错误处理

         function handleLocationError(error){

             switch(error.code){

                 case :

                     updateErrorStatus("有一个错误在获取你的位置:错误信息"+error.message);

                 break;

                 case :

                     updateErrorStatus("用户选择不分享他或她的位置。");

                 break;

                 case :

                     updateErrorStatus("浏览器无法确定自己的位置,错误信息"+error.message);

                 break;

                 case :

                     updateErrorStatus("在检索位置之前，浏览器超时。");

                 break;

             }

         }

     </script>

 </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. c# 对话框交换数据

    本例是一个管理联系人信息的小程序,程序有两个窗体,一个主窗体,在listview控件中显示联系人信息列表,一个对话框窗体,用来显示和修改 某个联系人的信息.通过主窗体的菜单命令,可以打开对话框,并把主 ...

  2. PLSQL_闪回操作4_Flashback Drop

    2014-06-25 Created By BaoXinjian

  3. PLSQL_性能优化系列10_Oracle Array数据组优化

    2014-09-25 Created By BaoXinjian

  4. Report_客制化Excel报表中的XLS标记（案例）

    2014-06-06 Created By BaoXinjian

  5. 基于ZooKeeper的分布式Session实现(转)

    1．   认识ZooKeeper ZooKeeper—— “动物园管理员”.动物园里当然有好多的动物,游客可以根据动物园提供的向导图到不同的场馆观赏各种类型的动物,而不是像走在原始丛林里,心惊胆颤的被 ...

  6. jquery 源码剖析1

    ()();   闭包,让声明的变量变成局部变量,使外部无法访问,防止和其他代码冲突,互不影响. (function(){ })();              和一般执行方法一样的. jQuery=f ...

  7. 表单“X”标记识别

    表单元数字列旁边的一列标有X字样的为待识别的.要求输出带有叉标记的对应数字列: 主要方法: 1:图像预处理 灰度化--二值化. 2:图像分割 投影法,根据图像特点,找出X标记所在列. 3:X标记单元定 ...

  8. Valid Number @python

    Valid Number Validate if a given string is numeric. Some examples:"0" => true" 0.1 ...

  9. div的contenteditable和placeholder蹦出的火花

    今天在做手机端发布描述内容时,需要实现换行,还需要有plachholder. 在文本框中换行自然想到了textarea. 问题似乎已经解决了,但是当内容发布后,在html中显示换行都丢失了. 这个时候 ...

  10. 微信消息接收 验证URL有效性 C#代码示例

    官方文档只给出了PHP的示例代码 开发者提交信息后,微信服务器将发送GET请求到填写的URL上,GET请求携带四个参数: 参数 描述 signature 微信加密签名,signature结合了开发者填 ...