HTML5的Geolocation地理位置定位API使用教程地理位置(Geolocation)是HTML5的重要特性之一,提供了确定用
户位置的功能,借助这个特性能够开发基于位置信息的应用,今天这篇文章就向大家介绍一下HTML5的Geolocation地理位置定位A
PI使用教程.?在手持设备如此普遍的今天，位置信息对于应用程序来讲是极其重要的，打车应用可以根据用户的位置信息呼叫附近的车辆，团
购软件可以根据当前的位置推荐附近的影院和美食，地图应用可以根据用户的位置快速规划到目的地的路线，可以说位置信息对于移动应用是不可或
缺的。为了顺应这个潮流，HTML5为我们提供了Geolocation库，有了它我们就能够在Web应用中轻而易举地实现上述这些功能
。那么今天我就为大家介绍一下这个库的使用。基本用法首先，我们可以从浏览器的navigator对象中通过geolocation属
性获取到一个Geolocation的实例，如下图所示：图中我们可以看到，Geolocation类有三个常用的方法，他们分别是：
1.getCurrentPosition:用于获取当前的位置信息2.watchPosition:用于在位置变化时实时监测位置
信息3.clearWatch:取消正在运行的监测操作我们先来看一下getCurrentPosition方法，下面是它的函数签
名：??11.navigator.geolocation.getCurrentPosition(success[,error[,
options]]);第一个参数用于指定一个成功后的处理函数，第二参数用于指定一个错误处理函数，第三个用于给函数提供一些可选的
配置项。现在我们就来调用这个函数：??1234567891011navigator.geolocation.getCurrentP
osition(function(position){2.//successhandlercodegoeshere3.?
??console.log(position);4.},function(error){5.//errorhandler
codegoeshere6.???console.log(error);7.},{//options8.???enabl
eHighAccuracy:true,9.???timeout:5000,10.???maximumAge:0?11.}
);?一旦这段代码运行起来，浏览器窗口就会弹出一个确认框，请求用户进行位置定位的授权：纯真棋牌http://www.26777
4.com?如果我们点击Allow允许该站点进行位置定位，该函数就开始从设备获取位置信息，并触发成功的回调函数，并将位置信息对象
传入回调函数中，上面的代码中我们在控制台打印了position，控制台信息如下：可以看到，position实际上是一个Geopo
sition对象的实例，其中包括coords和timestamp两个属性，后者是一个时间戳，记录获取到位置时的时间，coords里
面包含了很多位置有关的信息：accuracy:位置的精确度范围，单位为米altitude:海拔高度，单位为米，如果设备不支
持高度感应，则该属性为nullaltitudeAccuracy:海拔精确度范围，单位为米，如果设备不支持高度感应，则该属性为n
ullspeed:设备移动的速度，单位为米/秒，如果设备不能提供速度信息，该属性为nullheading:当前移动的方向，
以数字表示，单位为角度，以顺时针[0,360)度表示偏离正北方的角度，0表示正北方向，90度表示正东方向，180度表示正南方向，
270表示正西方向;需要注意的是，如果speed为0，则heading会是NaN，如果设备不能提供方向信息，则该属性为nulll
ongitude:经度信息latitude:纬度信息我们在成功的回调函数中接收到这些信息，可以根据实际的设备和应用场景获取
相应的信息，做进一步的操作。回到刚才的确认框，如果我们点击了Block阻止该站点获取当前的位置信息，代码就会授权失败，相应地，失
败的回调函数就会被触发，error错误对象也会被传入回调函数，我们的打印信息如下：可以看到error参数是一个PositionE
rror实例，包含一个错误码code和message，分别表示错误的类型和错误提示消息，其中错误码有以下几种：1:PERMIS
SION_DENIED-用户拒绝了授权请求，授权失败2:POSITION_UNAVAILABLE-因为一些内部错误，导
致位置获取失败3:TIMEOUT-超时，超过了配置的超时时间后还未获取到位置信息上面就是失败的回调函数，一般获取位置出现
错误时，我们都要及时捕获，并做相应的处理操作，以获取好的用户体验，这一点很重要。神马午夜影院http://v-8.cc在上面的调
用中，我们还传入了第三个参数，一个简单的对象，里面包含了几个配置信息，它们都是用来配置函数运行参数的：enableHighAcc
uracy:默认值为false，如果指定为true，则表示在设备支持的情况下，尽可能获取高精准度的数据，但这会在时间和电量方面存
在一定的消耗timeout:用于指定一个超时时间，单位为毫秒，表示在超时后停止位置获取的操作，默认值是Infinity，表示直
到获取到数据后才停止该操作的进行maximumAge:用于指定一个缓存位置信息的最长时间，在这个时间段内，获取位置时会从缓存中
取，单位为毫秒，默认值为0，表示不使用缓存，每次都取新的数据上面是关于getCurrentPosition方法的介绍，在某些场景
下，例如路线导航应用，我们需要实时地获取最新位置，进而为用户规划最新的路线，这时，上面的方法已经不能很好的满足需求了，我们需要使用
watchPosition方法：??12345if(''geolocation''innavigator){2.?//gettingusr''sposition3.}else{4.?//tips:yourpositionisnotavailable5.}? |
|
