你的位置:首页 > 网页设计

[网页设计]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>