HTML5 Geolocation API 使用方法

PHPABC Html5 1,283 次浏览 , 没有评论

HTML5 Geolocation API 用于获得用户的地理位置的方法。 它规范提供了一套保护用户隐私的机制,除非浏览器得到用户的明确许可,否则浏览不可获取用户的当前地理位置数据。 用户访问使用HTML5 Geolocation的站点,会触发隐私保护机制。 浏览器支持性目前HTML5 Geolocation在以下浏览器和操作系统中已被支持:

  1. Firefox3.5+
  2. Opera10.0+
  3. Safari4.0+
  4. iOS3.0+
  5. Android2.0+

在开始使用HTML5 Geolocation API前,我们必须要检查浏览器是否支持HTML5 Geolocation:

if (navigator.geolocation) {
console.log("HTML5 Geolocation is supported in your browser.");
}else{
console.log("HTML5 Geolocation is not supported in your browser.");
}

位置请求单次定位请求函数:void navigator.geolocation.getCurrentPosition(successCallBack,errorCallback,options); 这个函数是通过navigator.geolocation对象来调用的,所以在脚本中需要先取得此对象。这个函数接受一个必选参数和两个可选参数。
successCallBack:为浏览器指明位置数据可用时应调用的函数,即收到实际位置信息并进行处理的地方。
errorCallback:出错处理。
options:用来调整HTML5 Geolocation服务的数据收集方式。
示例:

    if (navigator.geolocation) {
    var options={
    enableHighAcuracy: true,// 指示浏览器获取高精度的位置,默认为false
    timeout: 5000, // 指定获取地理位置的超时时间,默认不限时,单位为毫秒
    };
    navigator.geolocation.getCurrentPosition(successCallBack, errorCallback,options); //位置请求
    }else{
    console.log("HTML5 Geolocation is not supported in your browser.");
    }
    function successCallBack(position) {
    console.log("经度:"+position.coords.longitude); //当前位置经度
    console.log("纬度:"+position.coords.latitude); //当前位置纬度
    }
    function errorCallback(error) {
 
    switch (error.code) {
    case error.PERMISSION_DENIED: //用户不允许地理定位
    console.log("用户不允许地理定位!");
    break;
    case error.POSITION_UNAVAILABLE: //无法获取当前位置
    console.log("无法获取当前位置!");
    break;
    case error.TIMEOUT: //获取操作超时
    console.log("获取操作超时!");
    break;
    case error.UNKNOWN_ERROR: //未知错误
    console.log("未知错误!");
    break;
    }
    }

successCallBack()函数若成功,则successCallBack()方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用,则会返回其他下面的属性。
属性 描述
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔,海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向,从正北开始以度计
coords.speed 速度,以米/每秒计
timestamp 响应的日期/时间
errorCallback()函数
HTML5定义了一些错误编号:
PERMISSION_DENIED(错误编号为1)——用户选择拒绝浏览器获得其位置信息。
POSITION_UNAVAILABLE(错误编号为2)——尝试获取用户位置数据失败。
TIMEOUT(错误编号为3)——设置了可选的timeout值,获取用户位置超时。
options:可选的地理定位请求特性
enableHighAccuracy:如果启用该参数,则通知浏览器启用HTML5 Geolocation服务的高精度模式,参数的默认值为false.
timeout:可选值,单位为ms,告诉浏览器计算当前位置所允许的最长时间。默认值为Infinity,即为无穷大或无限制。
maximumAge:这个值表示浏览器重新计算位置的时间间隔。它也是一个以ms为单位的值,默认为零,这意味着浏览器每次请求时必须立即重新计算位置。
这三个参数可以使用JSON对象传递,这样更便于添加到HTML5 Geolocation请求调用中。重复性的位置更新请求watchPosition() – 返回用户的当前位置,并继续返回用户移动时的更新位置(就像汽车上的 GPS)。

    navigator.geolocation.watchPosition(updateLocation,handleLocationError);

这个函数只要用户位置发生变化,Geolocation服务就会调用updateLocation处理程序。它的效果就像是在监视用户的位置,并会在其变化时及时通知用户一样。
clearWatch() – 停止 watchPosition() 方法

    //持续更新位置信息
    var watchId = navigator.geolocation.watchPosition(updateLocation, handleeLocationError);
    //停止更新
    navigator.geolocation.clearWatch(watchId);

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go