HTML5 Geolocation API

HTML5 geolocation API技术（地理定位技术），应用请求用户共享位置，提供位置相关的信息；或者是构建计算步行（跑步）路程的应用程序，在运动中启动记录功能；还有就是基于GPS导航的社交网络应用。目前Geolocation API中有两种类型的定位请求函数：单次定位请求和重复性的位置更新请求。

在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向 Google 位置服务发送本地网络信息，估计您所在的位置。然后，浏览器会与请求使用您位置的网站共享您的位置。

返回的位置信息，是通过支持HTML5地理定位功能的底层设备（笔记本电脑或手机）提供给浏览器的。位置信息由经纬度和一些其他元数据组成（取决于浏览器所在的硬件设备，包括还把、行驶方向和速度等），利用这些信息，可以构建位置感知类应用程序。

经纬度坐标可以使用十进制（39.1722）或者是DMS（角度，39°10′20″）格式。

位置信息从何而来

Geolocation API不能保证设备返回数据的准确性，设备可以使用下列数据源：

IP地址和三维坐标（GPS全球定位系统，WiFi的MAC地址，GSM或CDMA手机的ID和用户自定义数据）

IP地址，如果用户的IP地址是由ISP提供的，其位置往往就是由服务供应商的物理地址决定，不精确，而且在服务器端运算代价大。

GPS地理定位数据，通过手机运行在地球周围多个GPS卫星的信号提供，提供非常准确的定位结果，但是定位时间长，不适宜需要快速响应的应用程序。

WIFI地理定位数据，是通过三角计算得出的，用户当前位置到已知的多个WIFI接入点的距离，可在室内使用，简单快捷。

手机地理定位数据，通过用户到一些基站的三角距离确定，通常基于WIFI和GPS的地理定位信息结合使用。

重要提示，应用程序不能直接访问设备，它只能请求浏览器来代表他访问设备。

浏览器支持检查

当浏览器不支持时，可以提供一些替代文本，以提示用户升级浏览器或安装插件来增强现有浏览器功能：

    (function loadDemo(){
        if(navigator.geolocation){
            document.getElementById("support").innerHTML = "geolocation support";
        }else{
            document.getElementById("support").innerHTML = "geolocation not supporet";
        }
    })();

坐标还有一些特性，不能保证浏览器都为其提供支持，但如果不支持就会返回null（例如如果使用笔记本电脑，就无法访问用户位置还把高度altitude、行进方向heading、地面速度speed）

demo

window.onload=function(){
    var options={
            enableHighAccuracy:true,
            maximunAge:1000,
            timeout:45000
    };
    if(window.navigator.geolocation){
        navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);
    }else{
        alert("你的浏览器不支持定位!");
    }
}
function successCallback(position){
    var output="";
    output +="Your position has bean located . \r\n";
    output+=" Latitude:"+position.coords.latitude+" ";
    output+=" Longitude:"+position.coords.longitude+" ";
    output+=" Accuracy :"+position.coords.accuracy +" meters";
    if(position.coords.latitude){
        output+=" Accuracy :"+position.coords.altitudeAccuracy +" meters";
    }
    if(position.coords.heading){
        output+=" Heading :"+position.coords.Heading +" meters";
    }
    if(position.coords.speed){
        output+=" Speed :"+position.coords.Speed +" m/s";
    }
    output+=" Time of Position "+position.timestamp +" m/s";
    alert(output);
}


function errorCallback(error){
   switch(error.code){
   case error.PERMISSION_DENIED:
       alert("you have denied access to your position .");
       break;
   case error.POSITION_UNAVAILABLE:
       alert("there was a problem getting yout position .");
       break;
   case error.TIMEOUT:
       alert("The application has timed out attempting to get your location .");
       break;
       
   }
}

Geolocation API存在于navigator对象中，只包含3个方法：
1、getCurrentPosition
2、watchPosition
3、clearWatch

核心函数的调用

navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options);

successCallback指明位置数据可用时应调用的函数，因为像获取位置数据这样的操作可能需要比较长的时间才能完成。没有用户希望在检索位置时浏览器所锁定，也没有开发人员希望它们的程序无限期暂停。successCallback是收到实际位置信息并进行处理的地方。

errorCallback位置信息请求很可能因为一些不可控因素失败，参数是可选的，不过建议选用。提供一个用于跟用户解释或者提示其重试的函数。

options对象可以调整html5 geolocation服务的数据收集方式。

option

 enableHighAccuracy:通知浏览器启用html5服务高精确度模式
 maximunAge:表示浏览器重新计算位置的时间间隔，以ms为单位的值，默认为ns为单位的值，每次请求必须立即计算位置。
 timeout:告诉浏览器计算当前位置所允许的最长时间，如果超过这个时间没有完成计算，就会调用错误处理程序，默认为infinity无限大。

对于错误编号

PERMISSION_DENIED:用户选择拒绝浏览器获取其位置信息
POSITION_UNAVAILABLE:尝试获取用户位置数据，但失败
TIMEOUT:设置可选的timeout值，会尝试确定用户位置的过程超时。

coords属性有7个值，包含上面用到的纬度、经度

1、accuracy 准确角
2、altitude 海拔高度
3、altitudeAcuracy 海拔高度的精确度
4、heading 行进方向
5、speed 地面的速度

百度地图结合HTML5 Geolocation API

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4 <meta charset='utf-8'>
 5 <title>百度地图</title>
 6 <script type='text/javascript' src='http://api.map.baidu.com/api?v=1.3'></script>
 7 <script type='text/javascript'>
 8 
 9 function getLocation(){
10   if(navigator.geolocation){
11     navigator.geolocation.getCurrentPosition(showMap, handleError, {enableHighAccuracy:true, maximumAge:1000});
12   }else{
13     alert('您的浏览器不支持使用HTML 5来获取地理位置服务');
14   }
15 }
16 
17 function showMap(value){
18   var longitude = value.coords.longitude;
19   var latitude = value.coords.latitude;
20   var map = new BMap.Map('map');
21   var point = new BMap.Point(longitude, latitude);    // 创建点坐标
22   map.centerAndZoom(point, 15);
23   var marker = new BMap.Marker(new BMap.Point(longitude, latitude));  // 创建标注
24   map.addOverlay(marker);              // 将标注添加到地图中
25 }
26 
27 function handleError(value){
28   switch(value.code){
29     case 1:
30       alert('位置服务被拒绝');
31       break;
32     case 2:
33       alert('暂时获取不到位置信息');
34       break;
35     case 3:
36       alert('获取信息超时');
37       break;
38     case 4:
39       alert('未知错误');
40     break;
41   }
42 }
43 
44 function init(){
45   getLocation();
46 }
47 
48 window.onload = init;
49 
50 </script>
51 </head>
52 
53 <body>
54 <div id='map' style='width:600px;height:600px;'></div>
55 </body>
56 </html>

posted on 2015-04-18 16:01 floralam 阅读(1436) 评论(0) 编辑收藏举报