HTML5移动开发之路(18)HTML5地理定位

在前面的《HTML5移动开发之路（2）——HTML5的新特性》中介绍了关于HTML5的地理定位功能，这一篇我们来详细了解一下怎么使用该功能。HTML5GeolocationAPI用于获得用户的地理位置。鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的，在使用该功能的时候浏览器会弹出提醒框。一、地理定位的几种方式IP地址、GPS、Wifi、GSM/CDMA二、地理位置获取流程1、用户打开需要获取地理位置的web应用。2、应用向浏览器请求地理位置，浏览器弹出询问，询问用户是否共享地理位置。3、假设用户允许，浏览器从设别查询相关信息。4、浏览器将相关信息发送到一个信任的位置服务器，服务器返回具体的地理位置。三、浏览器的支持IE9.0+、FF3.5+、Safari5.0+、Chrome5.0+、Opera10.6+支持地理定位。注释：对于拥有GPS的设备，比如iPhone（IPhone3.0+、Android2.0+），地理定位更加精确。四、HTML5中地理位置定位的方法GeolocationAPI存在于navigator对象中，只包含3个方法：1、getCurrentPosition//当前位置、watchPosition//监视位置3、clearWatch//清除监视五、地理定位方法getCurrentPosition()[html]viewplaincopyprint?1.!DOCTYPEhtml2.html3.body4.pid=demo点击这个按钮，获得您的坐标：/p5.buttononclick=getLocation()试一下/button6.script7.varx=document.getElementById(demo);8.functiongetLocation(){9.if(navigator.geolocation){//判断是否支持地理定位10.//如果支持，则运行getCurrentPosition()方法。11.navigator.geolocation.getCurrentPosition(showPosition);12.}else{13.//如果不支持，则向用户显示一段消息14.x.innerHTML=Geolocationisnotsupportedbythisbrowser.;15.}16.}17.18.//获取经纬度并显示19.functionshowPosition(position){20.x.innerHTML=Latitude:+position.coords.latitude+21.br/Longitude:+position.coords.longitude;22.}23./script24./body25./htmlgetCurrentPosition(success,error,option)方法最多可以有三个参数：()方法第一个参数回调一个showPosition()函数并将位置信息传递给该函数，从该函数中获取位置信息并显示，getCurrentPostion()方法第二个参数用于处理错误信息，它是获取位置信息失败的回调函数getCurrentPostion()方法第三个参数是配置项，该参数是一个对象，影响了获取位置的细节。[html]viewplaincopyprint?1.!DOCTYPEhtml2.html3.body4.pid=demo点击这个按钮，获得您的坐标：/p5.buttononclick=getLocation()试一下/button6.script7.varx=document.getElementById(demo);8.functiongetLocation(){9.if(navigator.geolocation){//判断是否支持地理定位10.//如果支持，则运行getCurrentPosition()方法。11.navigator.geolocation.getCurrentPosition(showPosition,showError);12.}else{13.//如果不支持，则向用户显示一段消息14.x.innerHTML=Geolocationisnotsupportedbythisbrowser.;15.}16.}17.18.//获取经纬度并显示19.functionshowPosition(position){20.x.innerHTML=Latitude:+position.coords.latitude+21.br/Longitude:+position.coords.longitude;22.}23.24.//错误处理函数25.functionshowError(error){26.switch(error.code)//错误码27.{用户拒绝29.x.innerHTML=UserdeniedtherequestforGeolocation.30.break;31.caseerror.POSITION_UNAVAILABLE://无法提供定位服务32.x.innerHTML=Locationinformationisunavailable.33.break;34.caseerror.TIMEOUT://连接超时35.x.innerHTML=Therequesttogetuserlocationtimedout.36.break;37.caseerror.UNKNOWN_ERROR://未知错误38.x.innerHTML=Anunknownerroroccurred.39.break;40.}41.}42./script43./body44./html六、在Google地图中显示结果[html]viewplaincopyprint?1.!DOCTYPEhtml2.html3.body4.pid=demo点击这个按钮，获得您的位置：/p5.buttononclick=getLocation()试一下/button6.divid=mapholder/div7.scriptsrc==false/script8.script9.varx=document.getElementById(demo);10.functiongetLocation(){11.if(navigator.geolocation){12.navigator.geolocation.getCurrentPosition(showPosition,showError);13.}else{14.x.innerHTML=Geolocationisnotsupportedbythisbrowser.;15.}16.}17.18.functionshowPosition(position){=position.coords.latitude;20.lon=position.coords.longitude;21.latlon=newgoogle.maps.LatLng(lat,lon)22.mapholder=document.getElementById('mapholder')23.mapholder.style.height='250px';24.mapholder.style.width='500px';25.26.varmyOptions={27.center:latlon,zoom:14,28.mapTypeId:google.maps.MapTypeId.ROADMAP,29.mapTypeControl:false,30.navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}31.};32.varmap=newgoogle.maps.Map(document.getElementById(mapholder),myOptions);33.varmarker=newgoogle.maps.Marker({position:latlon,map:map,title:Youarehere!});34.}35.36.functionshowError(error){37.switch(error.code){38.caseerror.PERMISSION_DENIED:39.x.innerHTML=UserdeniedtherequestforGeolocation.40.break;41.caseerror.POSITION_UNAVAILABLE:42.x.innerHTML=Locationinformationisunavailable.43.break;44.caseerror.TIMEOUT:45.x.innerHTML=Therequesttogetuserlocationtimedout.46.break;47.caseerror.UNKNOWN_ERROR:48.x.innerHTML=Anunknownerroroccurred.49.break;50.}51.}52./script53./body54./html七、在百度地图中显示结果1、去百度开发者获取地图显示密钥[html]viewplaincopyprint?1.!DOCTYPEhtml2.html3.body4.pid=demo点击这个按钮，获得您的位置：/p5.buttononclick=getLocation()试一下/button6.divid=mapholderstyle=width:600px;height:500px;/div7.scripttype=text/javascriptsrc==2.0&ak=你自己的密钥/script8.script9.varx=document.getElementById(demo);(){11.if(navigator.geolocation){12.navigator.geolocation.getCurrentPosition(showPosition,showError);13.}else{14.x.innerHTML=Geolocationisnotsupportedbythisbrowser.;15.}16.}17.18.functionshowPosition(position){19.//alert(position.coords.longitude+___+position.coords.latitude);20.21.//百度地图API功能22.varmap=newBMap.Map(mapholder);//创建Map实例23.varpoint=newBMap.Point(position.coords.longitude,position.coords.lat