使用HTML5获取地理定位信息如何使用HTML5地理定位功能地理定位是HTML5的新特性,所以只能在支持HTML5的现代浏览器上运行,尤其是iphone等手持设备,地理定位是更确切。首先我们需要检测用户的设备浏览器是否支持地理定位,如果支持则获取地理信息。请注意,此功能可能会侵犯用户隐私。除非用户同意,否则用户的位置信息将不可用,因此我们会在访问应用时提示是否允许地理定位。当然,我们可以选择允许。functiongetLocation(){ if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(showPosition,showError); }else{ alert(\\\"浏览器不支持地理定位。\\\"); } }上面的代码知道如果用户的设备支持地理定位,那么运行getCurrentPosition()方法。如果getCurrentPosition()运行成功,会返回一个坐标对象给参数showPosition指定的函数,getCurrentPosition()方法的第二个参数showError用于处理错误,指定获取用户位置时运行的函数失败。我们先看函数showError(),它规定了获取用户地理位置失败时的一些错误码处理方法:alert(\\\"定位失败,用户拒绝地理定位请求\\\"); 休息; caseerror.POSITION_UNAVAILABLE: alert(\\\"定位失败,定位信息不可用使用\\\"); break; caseerror.TIMEOUT: alert(\\\"定位失败,请求获取用户位置超时\\\"); break; caseerror.UNKNOWN_ERROR: alert(\\\"定位失败,定位系统失败\\\"); 打破; }}再看函数showPosition(),调用coords的经纬度获取用户的经纬度。函数显示位置(位置){ varlat=position.coords.latitude;//纬度 varlag=position.coords.longitude;//longitude alert(\\\'latitude:\\\'+lat+\\\',longitude:\\\'+lag); }利用百度地图和谷歌地图接口获取用户地址上面我们了解到HTML5Geolocation可以获取用户的经纬度,那么我们要做的就是将抽象的经纬度转换成可读的、有意义的真实用户地理位置信息。好在百度地图和谷歌地图都提供了这方面的接口。我们只需要将HTML5获取的经纬度信息传递给地图接口,它就会返回用户的地理位置信息,包括省市信息,甚至街道,门牌号等详细的地理位置信息。我们先在页面定义显示地理位置的div,分别定义id#baidu_geo和id#google_geo。我们只需要修改关键函数showPosition()即可。先来看百度地图界面交互。我们通过Ajax将经纬度信息发送到百度地图接口,接口会返回对应的省、市、街道信息。百度地图接口返回一串JSON数据,我们可以根据需要将需要的信息显示到div#baidu_geo中。注意这里使用了jQuery库,需要先加载jQuery库文件。functionshowPosition(position){ varlatlon=position.coords.latitude+\\\',\\\'+position.coords.longitude; //baidu varurl=\\\"http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location=\\\"+latlon+\\\"&output=json&pois=0\\\"; $.ajax({ 键入:\\\"GET\\\", dataType:\\\"jsonp\\\", url:url, beforeSend:function(){ $(\\\"#baidu_geo\\\").html(\\\'定位...\\\'); }, 成功:function(json){ if(json.status==0){ $(\\\"#baidu_geo\\\").html(json.result.formatted_address); } }, error:function(XMLHttpRequest,textStatus,errorThrown){ $(\\\"#baidu_geo\\\").html(latlon+\\\"地址位置获取失败\\\"); } }); });再来看看谷歌地图的界面交互。同样,我们将经纬度信息通过Ajax发送给GoogleMaps接口,接口会返回对应省市街道的详细信息。谷歌地图接口返回的也是一串JSON数据,比百度地图接口返回的更详细。我们可以根据需要将需要的信息显示到div#google_geo中。functionshowPosition(position){ varlatlon=position.coords.latitude+\\\',\\\'+position.coords.longitude; //google varurl=\\\'http://maps.google.cn/maps/api/geocode/json?latlng=\\\'+latlon+\\\'&language=CN\\\'; $.ajax({ type:\\\"GET\\\", url:url, beforeSend:function(){ $(\\\"#google_geo\\\").html(\\\'is定位...\\\'); }, 成功:function(json){ if(json.status==\\\'OK\\\'){ var结果=json.results; $.each(results,function(index,array){ if(index==0){ $(\\\"#google_geo\\\").html(array[\\\'formatted_address\\\']); } }); } }, error:function(XMLHttpRequest,textStatus,errorThrown){ $(\\\"#google_geo\\\").html(latlon+\\\"获取地址位置失败\\\"); } }); }以上代码分别连接百度地图接口和谷歌地图接口集成到函数showPosition()中,大家可以根据实际情况调用。当然,这只是一个简单的应用,我们可以基于这个简单的例子开发出很多复杂的应用。
