HTML5 Geolocation（地理定位）用于定位用户的位置。

谁践踏了优雅 2023-02-08 12:56 12阅读 0赞

# 一、 #

# 定位用户的位置   HTML5 Geolocation API 用于获得用户的地理位置。   鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。   浏览器支持   Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。   注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。   HTML5 - 使用地理定位   请使用 getCurrentPosition() 方法来获得用户的位置。    #

二、

# HTML5 Geolocation API是新增的地理位置应用程序接口。它提供了一个可以准确感知浏览器用户当前地理位置的方法。如果浏览器支持，且设备具有定位功能，就能够直接使用这个API来获取当前位置信息。 #

window.navigator.geolocation对象存在3个方法：  
1. getCurrentPosition 获取当前地理位置  
2. watchPosition 监视位置信息  
3. clearWatch 停止获取位置信息

### 1 浏览器支持情况 ###

<table style="max-width:100%; border-collapse:collapse; border-spacing:0px; width:619px; margin-bottom:20px; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-style:solid solid solid none; border-top-color:rgb(221,221,221); border-right-color:rgb(221,221,221); border-bottom-color:rgb(221,221,221); background-color:transparent"> 
 <thead> 
  <tr> 
   <th style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:bottom"> 浏览器</th> 
   <th align="center" style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:bottom"> 说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> IE</td> 
   <td align="center" style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> 通过gears插件支持</td> 
  </tr> 
  <tr> 
   <td style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> FireFox</td> 
   <td align="center" style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> 3.5及以上版本支持</td> 
  </tr> 
  <tr> 
   <td style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> Opera</td> 
   <td align="center" style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> 10及以上版本支持</td> 
  </tr> 
  <tr> 
   <td style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> Chrome</td> 
   <td align="center" style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> 2.0及以上版本支持</td> 
  </tr> 
  <tr> 
   <td style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> Safari</td> 
   <td align="center" style="padding:8px; border-left-width:1px; border-left-style:solid; border-left-color:rgb(221,221,221); border-top-width:1px; border-top-style:solid; border-top-color:rgb(221,221,221); line-height:20px; vertical-align:top"> 4.0及以上版本支持</td> 
  </tr> 
 </tbody> 
</table>

### 2 检测浏览器是否支持 ###

function supportGeolocation() {
        return 'geolocation' in navigator;
    }

### 3 获取当前地理位置getCurrentPosition ###

这个getCurrentPosition(successCallback, onError, options)方法接受1个、2个或者3个参数。第1个参数为获取当前地理位置信息成功时所执行的回调函数，第2个参数为获取当前地理位置信息失败时所执行的回调函数，第3个参数为一些可选属性的列表。其中，第2、3个参数为可选参数。

navigator.geolocation.getCurrentPosition(function(position) {
        //TODO 获取成功时的处理
        var timestamp = position.timestamp;
        var coords = position.coords;
        console.log(timestamp);
        console.log(coords);
    }, function(error) {
        //TODO 获取失败时的处理
        console.log(error);
    }, {
        maximumAge: 0
    });

第1个参数，在获取地理位置信息成功时执行的回调函数中，带有一个position参数，它是一个Geoposition对象。该对象有以下两个属性：

**timestamp**属性，时间戳。  
**coords**属性，coords属性是一个Coordinates类型对象，包含下面这些属性：  
1. accuracy 获取到的经度或纬度的精度（以米为单位）。  
2. altitude 当前地理位置的海拔高度（不能获取时为null）。  
3. altitudeAccuracy 获取到的海拔高度的精度（以米为单位）。  
4. heading 设备的前进方向。用面朝正北方向的顺时针旋转角度来表示（不能获取时为null）。  
5. latitude 当前地理位置的经度。  
6. longitude 当前地理位置的纬度  
7. speed 当前的前进速度（以米/秒为单位，不能获取时为null）。

第2个参数，在获取地理位置信息失败时执行的回调函数中，带有一个error参数，它是一个PositionError对象。该对象有以下两个属性：

**code**属性，可能值：  
1. 当属性值为1时，表示用户拒绝了位置服务，"User denied Geolocation"。  
2. 当属性值为2时，表示获取不到位置信息，"Timeout expired"。  
3. 当属性值为3时，表示获取信息超时错误。  
**message**属性  
message属性值为一个字符串，包含了错误信息，这个错误信息在我们开发和调试时非常有用。

第3个参数是一个可选属性的列表，说明如下：

**enableHighAccuracy**属性，是否要求高精度的地理位置信息。  
**timeout**属性，超时限制（单位为毫秒）。如果在该时间内未获取到地理位置信息，则返回错误。  
**maximumAge**属性，对地理位置信息进行缓存的有效时间（单位为毫秒）。如果该值设为0，则每次都去重新获取地理位置信息。

### 4 监视地理位置信息watchPosition ###

使用watchPosition(successCallback, errorCallback, options)方法可以定期地获取用户地理位置信息。该方法使用方式与getCurrentPosition方法类似，这里就不再详细解释了。调用该方法会返回一个数字，这个数字与setInterval方法的返回值用法类似，可以被clearWatch方法使用，以停止对当前地理位置信息的监视.

### 5 停止获取位置信息clearWatch ###

使用clearWatch方法可以停止对当前用户地理位置信息的监视。用法如下：

navigator.geolocation.clearWatch(watchId);

参数watchId为调用watchPosition方法时的返回值。