以前如果要获取互联网用户所在地都是根据用户的IP地址来获取地理位置，这样获取到的数据和真实数据有很大的偏差。为了获取更加精确的位置，可以使用了html5的geolocation来获取经纬度，然后再获取所在地理位置，如何获取，我在下面会说到。先说下基本概念。
Geolocation在的navigator 对象中，我们可以通过 navigator.geolocation 来使用它。不支持 geolocation 的浏览器并不包含这一对象，那么可以通过下面的代码来做能力检测，对不同的浏览器做不同的处理。在访问 geolocation 对象时，即调用 geolocation 下面的方法时，浏览器会弹出提示，询问用户是否许可网站提供的位置服务，只有在得到用户许可过后，服务才会继续，否则将被停止。
常用的navigator.geolocation对象有以下三种方法：
获取当前地理位置：navigator.geolocation.getCurrentPosition(success_callback_function, error_callback_function, position_options)
持续获取地理位置：navigator.geolocation.watchPosition(success_callback_function, error_callback_function, position_options)
清除持续获取地理位置事件：navigator.geolocation.clearWatch(watch_position_id)
参数position_options是配置项，由JSON格式传入：
enableHighAccuracy：true/false，它将告诉浏览器是否启用高精度设备，所谓的高精度设备包含但不局限于前面所提到的 GPS 和 WIFI，值为 true 的时候，浏览器会尝试启用这些设备，默认指为 true，在这种情况下，浏览器会尽可能地进行更为精确的查询，简单地说，如果用户有可用的 GPS 设备，会返回 GPS 设备的查询结果，IP 是最后的选择，对于移动设备来说，网络接入点(基站)或许成为另一个选择，对此我还没有完全了解，但根据测试，即时没有任何额外功能的手机，也能够得到更为精确的查询结果。
maximumAge：单位毫秒，告诉设备缓存时间，主要用于设备的省电或者节省带宽方面。
timeout：单位毫秒，超时事件，获取位置信息时超出设定的这个时长，将会触发错误，捕获错误的函数将被调用，并且错误码指向TIMEOUT。
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
`var` `position_option = {`
</div>
<div class="line number2 index1 alt1">
` ``enableHighAccuracy: ``true``,`
</div>
<div class="line number3 index2 alt2">
` ``maximumAge: 30000,`
</div>
<div class="line number4 index3 alt1">
` ``timeout: 20000`
</div>
<div class="line number5 index4 alt2">
` ``};`
</div>
<div class="line number6 index5 alt1">
`navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, position_option);`
</div>
</div>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
`function` `getPositionSuccess( position ){`
</div>
<div class="line number2 index1 alt1">
` ``var` `lat = position.coords.latitude;`
</div>
<div class="line number3 index2 alt2">
` ``var` `lng = position.coords.longitude;`
</div>
<div class="line number4 index3 alt1">
` ``alert( ``"您所在的位置： 纬度"` `+ lat + ``"，经度"` `+ lng );`
</div>
<div class="line number5 index4 alt2">
` ``if``(``typeof` `position.address !== ``"undefined"``){`
</div>
<div class="line number6 index5 alt1">
` ``var` `country = position.address.country;`
</div>
<div class="line number7 index6 alt2">
` ``var` `province = position.address.region;`
</div>
<div class="line number8 index7 alt1">
` ``var` `city = position.address.city;`
</div>
<div class="line number9 index8 alt2">
` ``alert(``' 您位于 '` `+ country + province + ``'省'` `+ city +``'市'``);`
</div>
<div class="line number10 index9 alt1">
` ``}`
</div>
<div class="line number11 index10 alt2">
`}`
</div>
</div>
</td>
</tr>
</table>
coords其他返回信息：
coords.accuracy：返回经纬度的精度（米）
coords.speed :速度
coords.altitude ：当前的高度，海拔（米）
coords.altitudeAccuracy：高度的精度（米）
coords.heading：朝向
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="code">
<div class="container">
<div class="line number1 index0 alt2">
`function` `getPositionError(error) {`
</div>
<div class="line number2 index1 alt1">
` ``switch` `(error.code) {`
</div>
<div class="line number3 index2 alt2">
` ``case` `error.TIMEOUT:`
</div>
<div class="line number4 index3 alt1">
` ``alert(``"连接超时，请重试"``);`
</div>
<div class="line number5 index4 alt2">
` ``break``;`
</div>
<div class="line number6 index5 alt1">
` ``case` `error.PERMISSION_DENIED:`
</div>
<div class="line number7 index6 alt2">
` ``alert(``"您拒绝了使用位置共享服务，查询已取消"``);`
</div>
<div class="line number8 index7 alt1">
` ``break``;`
</div>
<div class="line number9 index8 alt2">
` ``case` `error.POSITION_UNAVAILABLE:`
</div>
<div class="line number10 index9 alt1">
` ``alert(``"获取位置信息失败"``);`
</div>
<div class="line number11 index10 alt2">
` ``break``;`
</div>
<div class="line number12 index11 alt1">
` ``}`
</div>
<div class="line number13 index12 alt2">
`}`
</div>
</div>
</td>
</tr>
</table>
💬 评论