time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > html5指南--4.使用Geolocation

html5指南--4.使用Geolocation

时间:2012-09-12 00:09 点击:1053次 字体:[ ]




   今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,他提供了下列方法:

getCurrentPosition(callback,errorCallback,options):获取当前位置;

watchPosition(callback,error,options):开始监控当前位置;

clearWatch(id):停止监控当前位置。

   note:下面例子使用的浏览器是chrome,使用其他浏览器我不能保证运行结果和例子显示的结果一致。

 

  1.获取当前位置

  我们将使用getCurrentPosition方法获取当前位置,位置信息不会以结果的形式直接返回,我们需要使用callback函数进行处理。在获取坐标的过程中会有些延迟,还会问你要访问权限。我们来看下面的例子:

 

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>Example</title> 
  5.     <style> 
  6.         table{border-collapse: collapse;} 
  7.         th, td{padding: 4px;} 
  8.         th{text-align: right;} 
  9.     </style> 
  10. </head> 
  11. <body> 
  12.     <table border="1"> 
  13.         <tr> 
  14.             <th>Longitude:</th> 
  15.             <td id="longitude">-</td> 
  16.             <th>Latitude:</th> 
  17.             <td id="latitude">-</td> 
  18.         </tr> 
  19.         <tr> 
  20.             <th>Altitude:</th> 
  21.             <td id="altitude">-</td> 
  22.             <th>Accuracy:</th> 
  23.             <td id="accuracy">-</td> 
  24.         </tr> 
  25.         <tr> 
  26.             <th>Altitude Accuracy:</th> 
  27.             <td id="altitudeAccuracy">-</td> 
  28.             <th>Heading:</th> 
  29.             <td id="heading">-</td> 
  30.         </tr> 
  31.         <tr> 
  32.             <th>Speed:</th> 
  33.             <td id="speed">-</td> 
  34.             <th>Time Stamp:</th> 
  35.             <td id="timestamp">-</td> 
  36.         </tr> 
  37.     </table> 
  38.     <script> 
  39.         navigator.geolocation.getCurrentPosition(displayPosition); 
  40.  
  41.         function displayPosition(pos) { 
  42.             var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed']; 
  43.             for (var i = 0len = properties.length; i < len; i++) { 
  44.                 var value = pos.coords[properties[i]]; 
  45.                 document.getElementById(properties[i]).innerHTML = value
  46.             } 
  47.             document.getElementById('timestamp').innerHTML = pos.timestamp; 
  48.         } 
  49.     </script> 
  50. </body> 
  51. </html> 

 

  返回的position对象包含两个属性,coords:返回坐标信息;timestamp:获取坐标信息的时间。其中coords又包括下面属性:latitude:纬度;longitude:经度;altitude:高度;accuracy:精确度(米);altitudeAccuracy:高度精确度(米);heading:行进方向;speed:行进速度(米/秒)。

  并不是所有的信息都会返回,这取决于你承载浏览器的设备。像有GPS、加速器、罗盘的移动设备会返回大部分信息,家用电脑就不行了。家用电脑获取的位置信息,取决于所处的网络环境或者是wifi。下面我们看上例的运行结果。

html5指南--4.使用Geolocation_www.fengfly.com

点击允许,获取坐标信息。

html5指南--4.使用Geolocation_www.fengfly.com



本文地址 : http://www.fengfly.com/plus/view-209210-1.html
标签: HTML5 Geolocation
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: