HTML5 地理定位 GeoLocation

HTML5 地理定位 GeoLocation
时间:2011-08-23 01:33 来源:未知作者:admin 点击：2036
HTML5提供了一组API用来获取用户的地理位置，如果浏览器支持且设备具有定位功能，就能够直接使用这组API来获取当前位置信息。下图是用iPad的Safari浏览器，访问Google地图的截屏（不是iPad预装的Maps）

使用这组API的方法非常简单，是navigator对象的一个属性geolocation，如下：
navigator.geolocation.getCurrentPosition(show_map);

其中show_map是回调函数。因此加上判断浏览器是否支持的完整方法：
function get_location(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(show_map);
}else{
alert("Your browser does not support HTML5 geoLocation");
}
}

截止目前，支持它的浏览器：
IE Firefox Safari Chrome Opera iPhone/iPad Android
3.5+ 5.0+ 5.0+ 3.0+ 2.0+

通常浏览器都会问用户，是否允许页面使用您的当前位置，Firefox是最上面弹出一个提示条，iPad是弹出对话框。一般人都会选允许，如果不允许会返回错误，稍后说。

回调函数show_map，主要是提供一个position对象，返回地理信息，如下：
function show_map(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
showObject(position,0);//自己写一个把数据显示出来的函数
}
详细的HTML5官方定义：
Property Type Notes
coords.latitude（纬度） double Decimal degrees
coords.longitude（经度） double Decimal degrees
coords.altitude（海拔） double or null Meters
coords.accuracy（精确度） double Meters
coords.altitudeAccuracy double or null Meters
coords.heading（朝向） double or null degrees clockwise from the north
coords.speed double or null Meters/second
timestamp DOMTimeStamp Like a Date() object

地理信息这东西，经常会出错，各种因素吧，例如信号不好等等。因此getCurrentPosition其实还有第二个参数，就是处理错误的，如下：
navigator.geolocation.getCurrentPosition(show_map,handle_error);

其中handle_error也是一个回调函数，提供一个err对象，包含code和message两个属性，使用方法较简单：
function handle_error(err){
switch(err.code){
case 1 :
   alert("permission denied");//用户选了不允许
   break;
case 2:
   alert("the network is down or the position satellites can't be contacted");
   //连不上GPS卫星，或者网络断了
   break;
case 3:
   alert("time out");//超时了
   break;
default:
   alert("unknown error");//未知错误，其实是err.code==0的时候
   break;
}
}

再深入一些，getCurrentPosition其实还有第三个参数，是一个对象，可以设置超时时间、缓存时间等，如下：
Property Type Default Notes
enableHighAccuracy boolean false true might be slower
timeout long (no default) In milliseconds
maximumAge long 0 In milliseconds

例如：
navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:true,maximumAge:75000});

enableHighAccuracy表示是否允许使用高精度，但这个参数在很多设备上设置了都没用，设备综合考虑电量、地理情况等，很多时候都是默认的由设备自身来调整。
maximumAge是指缓存的时间，例如maximumAge:75000（1分钟是60000）。那么如果10:00整的时候获取过一次地理信息，10:01的时候，再次调用navigator.geolocation.getCurrentPosition，返回的依然是10:00时候的数据。

综上所述，我自己写的一个在iPad上的程序：
function showObject(obj,k){
//递归显示object
if(!obj){return;}
for(var i in obj){
if(typeof(obj[i])!="object" || obj[i]==null){
   for(var j=0;j<k;j++){
    document.write("    ");
   }
   document.write(i + " : " + obj[i] + "<br/>");
}else{
   document.write(i + " : " + "<br/>");
   showObject(obj[i],k+1);
}
}
}
function get_location(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(show_map,handle_error,{enableHighAccuracy:true,maximumAge:1000});
}else{
alert("Your browser does not support HTML5 geoLocation");
}
}
function handle_error(err){
//错误处理
switch(err.code){
case 1 :
   alert("permission denied");
   break;
case 2:
   alert("the network is down or the position satellites can't be contacted");
   break;
case 3:
   alert("time out");
   break;
default:
   alert("unknown error");
   break;
}
}
function show_map(position){
//显示地理信息
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
showObject(position,0);
}
get_location();

在公司的iPad上跑了一下，结果是这样的：
coords:
speed : null
accuracy : 80
altitudeAccuracy : null
altitude : null
longitude : 116.30371844499999
heading : null
latitude : 39.98390346
timestamp : 1288180931839

如果希望持续的获取用户的地理信息，当然可以采用javascript的setInterval，但是HTML5提供了另外一个函数，能够自动刷，就是navigator.geolocation.watchPosition。它跟上面提到的getCurrentPosition参数完全一样，用法也一样。不同的就是它会自己不断刷新。
另外，watchPosition函数本身，还返回一个数字，跟setInterval类似，可以使用clearWatch()来清除，例如：

var watchInterval = navigator.geolocation.watchPosition(show_map,handle_error,{enableHighAccuracy:true,maximumAge:1000,timeout:15000});
在需要的时候可以使用clearWatch(watchInterval);

Google地图是比较好的例子。另外，天气预报也是可以利用地理信息的，让用户能够直接看到自己所在城市的天气，而不需要再选城市。再有就是一些大的国际新闻媒体网，会根据用户的地理位置，显示不同地区的新闻。
前几天做讲座的时候，发现baidu最近也更新了iPad上的地图页面，也能够显示地理位置，下面是iPad的Safari打开baidu地图的截图，虽然把我公司定位到了四环大马路上，但还是非常准的（之前程序跑出来，精度是80米嘛）

HTML5 地理定位 GeoLocation

猜你喜欢