HTML5 地理位置定位(HTML5 Geolocation)

HTML5的强大,无需我过多的介绍,其中Geolocation地理定位是HTML5的重要特性之一。使用这个特性我们就可以开发出基于地理位置信息的应用。例如你要实现查询用户周边酒店、加油站等功能时,你可以调用百度地图、高德地图、google地图等接口,然后根据用户的具体地理坐标位置等信息来搜寻周边事物。

当然,每个人的地理位置信息是属于他个人的隐私。所以一般游览器都会先询问用户是否愿意,如果用户拒绝的话,则用户位置信息是不可用的。

HTML5 地理位置定位(HTML5 Geolocation)原理及应用 

HTML5移动开发即学即用(双色) PDF+源码

HTML5入门学习笔记

HTML5移动Web开发笔记

HTML5 开发中的本地存储的安全风险

《HTML5与CSS3权威指南》及相配套源码

关于 HTML5 令人激动的 10 项预测

HTML5与CSS3实战指南 PDF


    废话不多说,直接上代码:

<script>

var x=document.getElementById("demo");

functiongetLocation()

{

if(navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML="Geolocation is not supported by this browser.";}

}

functionshowPosition(position)

{

x.innerHTML="Latitude: "+ position.coords.latitude +

"<br />Longitude: "+ position.coords.longitude;

}

</script>


  以上是没有报错信息处理的代码。如果未能显示出纬度(Latitude)、经度(Longitude)信息的话,那你就得检查下游览器是否支持地理定位。

(1)如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。

(2)如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象。showPosition() 函数则是获得并显示经度和纬度。

当然我们也可以有处理错误的功能反馈给用户:

function showError(error)

{

switch(error.code)

{

case error.PERMISSION_DENIED://用户不允许地理定位

x.innerHTML="User denied the request for Geolocation."

break;

case error.POSITION_UNAVAILABLE://无法获取当前位置

x.innerHTML="Location information is unavailable."

break;

case error.TIMEOUT://操作超时

x.innerHTML="The request to get user location timed out."

break;

case error.UNKNOWN_ERROR://未知错误

x.innerHTML="An unknown error occurred."

break;

}

}


  getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数:

navigator.geolocation.getCurrentPosition(showPosition,showError);

嗯,这样你就可以获得了用户的地理位置坐标信息。其实最重要的无非就是上面的那行代码,和获取坐标的两个方法:

position.coords.latitude//纬度

position.coords.longitude//经度

就酱紫了?不,它还能获得些呢,客观别急,接着往下看。

getCurrentPosition()--返回数据:

属性   描述  
coords.latitude   十进制数的纬度  
coords.longitude   十进制数的经度  
coords.accuracy   位置精度  
coords.altitude   海拔,海平面以上以米计  
coords.altitudeAccuracy   位置的海拔精度  
coords.heading   方向,从正北开始以度计  
coords.speed   速度,以米/每秒计  
timestamp   响应的日期/时间  

更多详情见请继续阅读下一页的精彩内容

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/a13895fe531e520a57540865fed56cb2.html