赵工的个人空间


专业技术部分转网页计算转业余爱好部分


  网站建设

首页 > 专业技术 > 网站建设 > HTML5地理位置API
HTML5地理位置API

HTML5的地理位置Geolocation API让我们可以直接使用JavaScript脚本获取地理位置信息。但此功能在移动设备上支持较好,台式机往往无法获取到相关信息。
Geolocation API定义了一个基于主机设备实现的高层次接口,用于获取地理位置信息,如经纬度,API本身无法知道地理位置信息的来源。如果需要使用基于地理位置的应用,则需要经过用户的授权。

1.地理位置信息:

地理位置信息来自于世界大地测量系统(World Geodetic System)。最基本的地理位置包括经度和纬度,,完整的地理位置坐标信息还包括经纬度的精确度、海拔高度、海拔高度的精确度、移动方向、移动速度。根据终端设备的功能不同,地理位置信息的完整性会有差异。如果这些数据不存在,则返回null。

2.地理位置信息的来源:

HTML5 Geolocation API并没有指定地理位置信息的来源,以及以何种方式获取地理位置信息,这部分工作是由浏览器完成的。浏览器收到地理位置信息请求时,会访问地理位置信息的来源,以获取相应的地理位置信息。
常见的地理位置信息来源有:GPS(全球定位系统)、网络信号位置(如IP地址、WIFI的MAC地址等)、GSM/CDMA手机的ID、用户自定义数据。
至于使用哪种地理位置信息来源,则取决于用户终端设备的功能。有些移动设备会支持GPS、WiFi、蓝牙等功能,但台式机则一般仅支持IP地址。所以,在实际的应用中,并不能保证用户设备返回的实际位置是精确的。

3.隐私策略:

地理位置信息的泄露会损害用户的隐私,Geolocation API明确规范了用户隐私的保护机制,即通过Geolocation API获取用户位置信息要明确获得用户的许可。
在没有用户许可的情况下,浏览器不能向Web站点发送地理位置信息;浏览器必须通过一个用户界面向用户提示以获得许可,或者该站点已经与用户建立了信任关系;用户界面必须包括URI的主机部分;如果页面跳转到其他没有许可的页面,则需要撤销保存的会话和许可。
对于一些用户代理将预先建立信任关系,不再需要上述的用户界面,例如VOIP电话可能不存在任何用户界面,就产生了地理位置许可。
应用程序只能在必要的时候请求地理位置信息,应用程序只能在提供给它们的任务中使用地理位置信息。一旦任务完成,应用程序必须释放地理位置信息,除非用户明确许可,否则不能保存位置信息。应用程序必须防止未经授权的访问,如果地理位置信息被保存,则应允许用户删除或更新该信息。
应用程序不能转发未经用户许可的地理位置信息,提倡重传时使用加密的方式。在收集地理位置数据时,应用程序应该明确、清楚地披露:会收集位置信息、为什么收集、数据会保留多久、如何保证数据安全、位置数据如何使用、位置数据如何共享、用户如何访问和更新或删除。

4.检测Geolocation的浏览器支持情况:

在HTML5的所有新增功能中,Geolocation是第一批被全部接受和实现的功能之一,相关规范也已达到相对成熟的阶段。但,使用Geolocation之前,还是有必要检测浏览器是否支持该功能,通常是直接检测navigator.geolocation对象是否存在。示例:
if (navigator.geolocation) {
   alert("浏览器支持Geolocation API");
} else {
   alert("浏览器不支持Geolocation API");
}

5.单次获取地理信息:

在许多应用中,只请求一次用户的地理位置即可。单次请求地理位置,使用的是地理位置API的getCurrentPosition()方法:
function successCallback(position) {
   //显示position中的地理位置信息
}
function errorCallback(error) {
   //显示error中的错误信息
}
Var options={}; //可选参数
if (navigator.geolocation) {
   navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
}
Navigator.geolocation通过getCurrentPosition()方法向浏览器底层设备请求地理位置信息,该方法有3个参数,第一个参数是必需的,其他两个可选。如果请求成功,则调用回调函数successCallback();如果请求失败,则调用回调函数errorCallback();参数options是在请求中附加一些特性。

1)回调函数successCallback():

successCallback()回调函数是getCurrentPosition()方法中的必须参数。一旦地理位置信息请求成功,就会调用successCallback()回调函数,该函数的参数position包含了请求到的地理位置信息coords。
参数position包含了7个方面的信息,latitude(纬度)、longitude(经度)、accuracy(经纬度的精确度)、altitude(海拔高度)、altitudeAccuracy(海拔高度精确度)、heading(移动方向)、speed(移动速度)。其中前三个信息是必需的数据,其他信息不保证浏览器都能支持,如果不支持则返回null。完善回调函数:
function successCallback(position) {
   var tmp="<table border='0' cellpadding='0' cellspacing='1'>";
   tmp+="<tr><td>纬度</td><td>"+position.coords.latitude+"</td></tr>";
   tmp+="<tr><td>经度</td><td>"+position.coords.longitude+"</td></tr>";
   tmp+="<tr><td>经纬精度</td><td>"+position.coords.accuracy+"</td></tr>";
   tmp+="<tr><td>海拔</td><td>"+position.coords.altitude+"</td></tr>";
   tmp+="<tr><td>海拔精度</td><td>"+position.coords.altitudeAccuracy+"</td></tr>";
   tmp+="<tr><td>前进方向</td><td>"+position.coords.heading+"</td></tr>";
   tmp+="<tr><td>移动速度</td><td>"+position.coords.speed+"</td></tr>";
   tmp+="</table>";
   document.getElementById("resultText").innerHTML=tmp;
}

2)回调函数errorCallback():

errorCallback()函数是可选的参数,只要getCurrentPosition()方法请求不成功,都会调用回调函数errorCallback(),包括未被用户许可。
errorCallback()函数中包含了一个error参数,记录了错误的代码和错误信息。其中错误代码中的错误编号代表了不同的含义,见下表:

代码

编号

说明

PERMISSION_DENIED

1

表示用户选择拒绝浏览器获得其地理位置信息

POSITION_UNAVAILABLE

2

表示已尝试获取用户的地理位置,但失败了

TIMEOUT

3

如果用户设置了可选的timeout值,出现了超时

在出现错误的情况下,需要让用户知道应用程序出了问题,或者还会希望再次尝试请求,需要完善回调函数errorCallback():
function errorCallback(error) {
   var err="";
   switch (error.code) {
      case error.PERMISSION_DENIED:
         err="用户阻止了该页面获取地理位置:"+error.message;
         alert(err);
         break;
      case error.POSITION_UNAVAILABLE:
         err="浏览器没能获取到地理位置:"+error.message+"\n是否尝试再次请求?";
         confirm(err)?navigator.geolocation.getCurrentPosition(successCallback, errorCallback):"";
         break;
      case error.TIMEOUT:
         err="获取地理位置超时:"+error.message+"\n是否尝试再次请求?";
         confirm(err)?navigator.geolocation.getCurrentPosition(successCallback, errorCallback):"";
         break;
      default:
         err=""+error.message;
         alert(err);
         break;
   }
}

3)可选参数options:

可选参数options是一个对象参数,其中包含了3个属性:
·enableHighAccuracy:默认为false。如果设置为true,则会通知浏览器启用高精度模式。
·timeout:可选值,单位ms,默认为Infinity,设置当前位置请求所允许的最长时间。
·maximumAge:可选值,单位ms,默认0,设置浏览器重新计算地理位置的时间间隔,即更新位置信息的频率。只要浏览器在该时间段之内成功请求过位置信息,就不会重新计算位置,直接使用之前获取的位置信息。示例:
var options={timeout:5000,maximumAge:600000};

6.重复性的位置信息更新:

在一些应用中,需要不断地更新用户的地理位置信息。HTML5 Geolocation提供了重复更新地理位置信息的方法watchPosition()。方法:
var watchId=navigator.geolocation.watchPosition(successCallback,errorCallback,options);
watchPosition()方法会首先返回一个watchId,然后以既定时间间隔不断地请求位置信息。如果用户想关闭更新,可以使用clearWatch()方法:
navigator.geolocation.clearWatch(watchId);
watchPosition()方法中设置的timeout属性,是指每一次请求位置信息时的过期时间,而不是总的过期时间;位置信息更新的频率会参考maximumAge属性。当再次请求位置信息时,只有当请求的位置发生变化时,才会调用回调函数successCallback()。

 

Copyright@dwenzhao.cn All Rights Reserved   备案号:粤ICP备15026949号
联系邮箱:dwenzhao@163.com  QQ:1608288659