现在互联网中有了越来越多的地理位置服务,正在制定中的HTML5规范也试图在浏览器中内置嵌入地理位置共享服务,而且幸运的是,我们已经能够在Firefox 3.5+、Chrome 5.0+、Opera 10.60+、Safari 5.0+ 以及一些移动终端,注入IPhone、Android上使用这项服务,那么这个服务能否有Mapabc的API结合,来实现用户的地理定位呢?
传统上,地图应用上为用户定位的方式一般是:
用户访问时获得用户的IP。
用这个IP到IP库中匹配用户的城市信息。
根据获取的城市信息去已有的城市中心点字典中进行匹配。
匹配完成后将用户地图的中心点进行相应的切换。
这个过程繁琐,而且准确性极大程度上依赖于我们IP库的准确程度。现在有了浏览器的位置共享服务,我们可以更容易的实现用户的地理定位。
Geolocation对象介绍
正如开头所讲的,到目前为止,W3C中deGeolocation API规范已经在非IE的浏览中得到了实现。规范中提到,浏览器提供位置信息的来源是不固定的,可能是GPS、也可能来自于IP地址、RFID、WiFi、蓝牙或者GSM\CDMA的定位信息,也不保证返回的结果一定准确。Geolocation的API同时对“只获得一次”定位和“持续监督”定位都做出了规定。
Geolocation的一些方法
Geolocation对象位于浏览器Navigator对象下,可以通过 navigator.geolcation 来访问,不支持 geolocation 的浏览器不会包含这一对象,不会造成错误,可以用来做浏览器的区分。
if ( navigator.geolcation ){
alert(‘ Your Browser dosent support geolcocation ');
} else{
alert(‘ Your Browser support geolocation’);
}
在访问 geolocation 对象时,浏览器会进行提示,询问用户使用许可对网站提供位置服务,得到用户的许可后,访问才会继续,否则会被停止。而且,我们可以捕捉到用户同意或者拒绝的事件。
在获得用户的学科之后,就可以利用Geolocation获取当前位置,核心方法如下:
navigator.geolocation.getCurrentPosition( getPositionSuccess , getPositionError );
上面的代码中,调用了 getCurrentPosition 方法,并且传递了两个回调函数的参数,分别用来处理位置获取成功和失败时的情况。实事上,这个函数还可以接受第三个参数,用来传入一些配置信息,包括对于超时的设置等。下面来看两个获取成功和获取失败时,回调函数的处理。
获取地理信息成功的错误处理信息
function getPositionSuccess ( position ) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
alert( ‘Now you are lat – lng ‘);
}
获取地理位置失败的回调函数
function getPositionError( error ){
switch(error.code)
case error.TIMEOUT;
//Do something
break;
case error.PERMISSION_DENIED;
//Do something
break;
case error.POSITION_UNAVAILIABLE;
//Do something
break;
}
获取地理位置信息的配置变量。在填入获取地理位置信息变量时,能够对获取地理位置的一些细节进行影响。下面是目前包括的几个具体参数
In ECMAScript, the
enableHighAccuracy,timeoutandmaximumAgeproperties are all optional: when creating a PositionOptions object, the developer may specify any of these properties.
刚才也提到,我们还可以对地理位置进行持续的追踪,这是需要用到 watchPosition 方法。
因为对于移动设备的用户来说,位置并不是固定的,我们需要来处理这种移动客户端的情况,而不是每次要提醒用户去刷新浏览器来更新位置。
navigator.geolocation.watchPosition( refreshPosition );
与Mapabc API的整合
看完上面的关于 geolocation 的介绍之后,我们就可以将这个服务与Mapabc API一起,整合到我们的应用中了。下面是一个具体的实现样例,供参考:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div>
<div >Mapabc API