您好,欢迎来到无锡中智培训学校电脑培训专业网!咨询电话:0510-82828991
分享到:
无锡中智职业培训学校七大校区就近上课:南禅寺校区、胜利门校区、河埒口校区、新区校区、恒隆校区、宜兴校区、江南校区

网页设计html5使用Geolocation定位功能

时间:2014-12-16 13:20 作者:中智培训 点击:
  无锡中智培训老师分享:网页设计html5使用Geolocation定位功能
  1.获取当前位置
  我们将使用getCurrentPosition方法获取当前位置,位置信息不会以结果的形式直接返回,我们需要使用callback函数进行处理。在获取坐标的过程中会有些延迟,还会问你要访问权限。我们来看下面的例子:
  代码如下:
  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Example</title>
  <style>
  table{border-collapse: collapse;}
  th, td{padding: 4px;}
  th{text-align: right;}
  </style>
  </head>
  <body>
  <table border="1">
  <tr>
  <th>Longitude:</th>
  <td id="longitude">-</td>
  <th>Latitude:</th>
  <td id="latitude">-</td>
  </tr>
  <tr>
  <th>Altitude:</th>
  <td id="altitude">-</td>
  <th>Accuracy:</th>
  <td id="accuracy">-</td>
  </tr>
  <tr>
  <th>Altitude Accuracy:</th>
  <td id="altitudeAccuracy">-</td>
  <th>Heading:</th>
  <td id="heading">-</td>
  </tr>
  <tr>
  <th>Speed:</th>
  <td id="speed">-</td>
  <th>Time Stamp:</th>
  <td id="timestamp">-</td>
  </tr>
  </table>
  <script>
  navigator.geolocation.getCurrentPosition(displayPosition);
  function displayPosition(pos) {
  var properties = ['longitude', 'latitude', 'altitude', 'accuracy', 'altitudeAccuracy', 'heading', 'speed'];
  for (var i = 0, len = properties.length; i < len; i++) {
  var value = pos.coords[properties[i]];
  document.getElementById(properties[i]).innerHTML = value;
  }
  document.getElementById('timestamp').innerHTML = pos.timestamp;
  }
  </script>
  </body>
  </html>
  返回的position对象包含两个属性,coords:返回坐标信息;timestamp:获取坐标信息的时间。其中coords又包括下面属性:latitude:纬度;longitude:经度;altitude:高度;accuracy:精确度(米);altitudeAccuracy:高度精确度(米);heading:行进方向;speed:行进速度(米/秒)。
  并不是所有的信息都会返回,这取决于你承载浏览器的设备。像有GPS、加速器、罗盘的移动设备会返回大部分信息,家用电脑就不行了。家用电脑获取的位置信息,取决于所处的网络环境或者是wifi。
  2.处理异常
  现在我们介绍getCurrentPosition的异常处理,他是通过使用errorCallback回调函数实现的。函数返回的参数error包含两个属性,code:错误类型的代码;message:错误信息。code包含三个值:1:用户没有授权使用geolocation;2:无法获取坐标信息;3:获取信息超时。
  下面我们看个例子:
  代码如下:
  <!DOCTYPE HTML>
  <html>
  <head>
  <title>Example</title>
  <style>
  table{border-collapse: collapse;}
  th, td{padding: 4px;}
  th{text-align: right;}
  </style>
  </head>
  <body>
  <table border="1">
  <tr>
  <th>Longitude:</th>
  <td id="longitude">-</td>
  <th>Latitude:</th>
  <td id="latitude">-</td>
  </tr>
  <tr>
  <th>Altitude:</th>
  <td id="altitude">-</td>
  <th>Accuracy:</th>
  <td id="accuracy">-</td>
  </tr>
  <tr>
  <th>Altitude Accuracy:</th>
  <td id="altitudeAccuracy">-</td>
  <th>Heading:</th>
  <td id="heading">-</td>
  </tr>
  <tr>
  <th>Speed:</th>
  <td id="speed">-</td>
  <th>Time Stamp:</th>
  <td id="timestamp">-</td>
  </tr>
  <tr>
  <th>Error Code:</th>
  <td id="errcode">-</td>
  <th>Error Message:</th>
  <td id="errmessage">-</td>
  </tr>
  </table>
  <script>
  navigator.geolocation.getCurrentPosition(displayPosition, handleError);
  function displayPosition(pos) {
  var properties = ["longitude", "latitude", "altitude", "accuracy", "altitudeAccuracy", "heading", "speed"];
  for (var i = 0; i < properties.length; i++) {
  var value = pos.coords[properties[i]];
  document.getElementById(properties[i]).innerHTML = value;
  }
  document.getElementById("timestamp").innerHTML = pos.timestamp;
  }
  function handleError(err) {
  document.getElementById("errcode").innerHTML = err.code;
  document.getElementById("errmessage").innerHTML = err.message;
  }
  </script>
  </body>
  </html>
  3.使用geolocation可选参数项
  getCurrentPosition(callback,errorCallback,options)中的options有如下参数可以使用,enableHighAccuracy:使用最好的效果;timeout:超时时间(毫秒);maximumAge:指定缓存时间(毫秒)。
  推荐:CSS3的box-shadow属性实现图层阴影效果
       网页设计表单Button的Outline

无锡中智教育 无锡电脑培训班 无锡网页设计培训 无锡平面设计培训
无锡市中智职业培训学校 无锡中智培训 专注电脑培训|网站地图
热线电话:400-8818-707 版权所有 无锡中智培训学校 WWW.WX68.COM Copyright ©2013 ALL Rights Reserved
备案号:渝ICP备09051384号-1
网站地图