基于位置服务html5,HTML5基于地理位置服务的getCurrentPosition()方法详解

探测用户的位置当前有不同的机制可以做到。在典型的web应用里，用户的网络环境/IP地址会被破译，然后服务器端来确定用户的位置。而在移动设备上，一个常见的GPS接收器能够提供更详细的位置。

HTML5通过Geolocation API来支持检测用户位置。根据你的需求它提供了单次的位置接收以及持续的位置接收。它通过浏览器里的navigator.geolocation来实现支持。在智能手机上基于webkit的浏览器上HTML5 Geolocation已经支持的不错了。

有了足够的理论了。让我们看看如何使用HTML5 Geolocation API来在浏览器里获取用户的位置。我们将看看在navigator.geolocation对象里的getCurrentPosition() 方法。getCurrentPosition() 方法有3个参数：成功的callback函数，错误callback函数和我们能指定的位置可选对象。错误回调函数和位置都是可选参数，但他们有时候也很 有用。看看下面的代码吧：

现在讲解下相关代码:

HTML 预遇新是直朋能到览

html>

HTML GeoLocation Test

functionfindMyCurrentLocation(){

vargeoService = navigator.geolocation;

if(geoService) {

alert("Your Browser supports GeoLocation");

navigator.geolocation.getCurrentPosition(

showCurrentLocation,errorHandler,{enableHighAccuracy: true});

} else{

alert("Your Browser does not support GeoLocation.");

}

}

functionshowCurrentLocation(position){

document.getElementById("mycurrentlocation").innerHTML

= "Your location details --> Current Latitude : "+

position.coords.latitude + " , Longitude : "+ position.coords.longitude;

}

functionerrorHandler(error){

alert("Error while retrieving current position. Error code: "

+ error.code + ",Message: "+ error.message);

}

* 我们定义了个"Find My Location"按钮，点击它, findMyCurrentLocation()方法会被执行.  * 在findMyCurrentLocation() 方法里, 我们先检测浏览器是否支持HTML5 Geolocation API, 通过查看navigator.geolocation对象实现. 如果不支持, 我们直接弹出一个警告提示. 如果是支持的, 我们就执行getCurrentPosition 方法. 注意我们提供的3个参数. 第一个参数是成功回调函数。 当浏览器能够得到用户位置的时候调用. 第二个参数是错误回调函数. 这个函数在浏览器无法获取位置时调用. 最后的第三个参数是一个PositionsOptions对象, 我们指定一个额外的标准参数来帮助 Geolocation API获取需要的数据. 在这个范例里, 我们指定了一个属性 enableHighAccuracy, 它告诉浏览器使用能支持的最大精度. 其它你可以指定的属性有 timeout 和 maxAge. 可以看下参考文档。

如果浏览器能够检测位置, 成功回调函数被执行 。 在本范例,它就是showCurrentLocation方法.一个位置类型的参数被传递给这个成功回调方法。 位置对象包含了一些位置数据上你想知道的信息。我们提取出了经纬度数据. 除此之外, 你也可以提取其他的数据例如海拔，速度，朝向等。

如果你的位置无法检测到, 错误回调函数被执行. 一个PositionError会传递给它.你可以使用PositionError 方法的错误代码和信息属性来检查为何失败的确切原因。 这些错误代码包括PositionError.PERMISSION_DENIED, PositionError.UNAVAILABLE 和PositionError.TIMEOUT. 因此如果你需要根据错误情况自定义一些错误信息处理，你可以检查错误代码给出自定义的提示信息，而不是默认的错误信息。因为不同的浏览器生成的错误代码并 不相同。

注意：检测用户的位置是一个敏感的主题并带来隐私问题。要求的做法是总是请求用户的允许，在HTML5里浏览器在检测位置之前，会请求用户的许可。每个浏 览器做法有差异，大部分都在地址栏下面弹出一个警告条。如果你点了“yes",然后才会开始检测位置。如果你拒绝，错误回调方法会被调 用，PositionError会有一个PERMISSION_DENIED的错误值。当你选择了同意，会伴随一个许可的位置检测设置。你可以打开浏览器 的设置并清除这些设置。因此不管你是用你的桌面浏览器还是移动设备浏览器，了解这些设置，否则代码会在缺失许可的情况下执行失败。