js基础-Geolocation API

Geolocation API（地理位置）

1、地理位置（Geolocation API）

Geolocation接口用于获取用户的地理位置。它使用的方法基于GPS或者其他机制（比如IP地址、Wifi热点、手机基站等）。

1.1 检测地理位置是否可用

if('geolocation' in navigator){ 

  //地理位置可用 

}else{ 

  //地理位置不可用 

} 

1.2 获取当前定位

getCurrentPosition()函数可用来获取设备当前位置：

navigator.geolocation.getCurrentPosition(success,error,option); 

参数说明：

• success：成功得到位置信息时的回调函数，使用Position对象作为唯一的参数
• error：获取位置信息失败时的回调函数，使用PositionError对象作为唯一的参数，可选项
• options：一个可选的PositionOptions对象，可选项

注意：使用它需要得到用户的授权，浏览器会跳出一个对话框，询问用户是否许可当前页面获取他的地理位置。如果同意授权，就会调用success；如果用户拒绝授权，则会抛出一个错误，调用error。

1.2.1 授权成功

function success(position){ 

  //成功 

} 

position 参数是一个Position对象。其有两个属性： timestamp 和 coords 。 timestamp 属性是一个时间戳，返回获得位置信息的具体时间。 coords 属性指向一个对象，包含了用户的位置信息，主要是以下几个值：

• coords.latitude：纬度
• coords.longitude：经度
• coords.accuracy：精度
• coords.altitude：海拔
• coords.altitudeAccuracy：海拔精度（单位：米）
• coords.heading：以360度表示的方向
• coords.speed：每秒的速度（单位：米）

1.2.2 授权失败

function error(PositionError){ 

  //用户拒绝授权 

} 

PositionError 接口表示当定位设备位置时发生错误的原因。
PositionError.code 返回无符号的、简短的错误码：

• 1 相当于PERMISSION_DENIED 地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。
• 2 相当于POSITION_UNAVAILABLE
  
  地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。
• 3 相当于TIMEOUT
  
  获取地理位置超时，通过定义PositionOptions.timeout 来设置获取地理位置的超时时长。

1.2.3 options参数

用来设置定位行为

var option = { 

  enableHighAccuracy : true, 

  timeout : Infinity, 

  maximumAge : 0 

}; 

参数说明：

• enableHighAccuracy ：如果设为true，就要求客户端提供更精确的位置信息，这会导致更长的定位时间和更大的耗电，默认设为false。

• Timeout ：等待客户端做出回应的最大毫秒数，默认值为Infinity（无限）。

• maximumAge ：客户端可以使用缓存数据的最大毫秒数。如果设为0，客户端不读取缓存；如果设为infinity，客户端只读取缓存。

1.3 监视定位

watchPosition() 方法可以用来监听用户位置的持续改变。它与 getCurrentPosition() 接受相同的参数，但回调函数会被调用多次。错误回调函数与 getCurrentPosition() 中一样是可选的，也会被多次调用。

var watchID = navigator.geolocation.watchPosition(success,error, options); 

一旦用户位置发生变化，就会调用回调函数success。这个回调函数的事件对象，也包含timestamp和coords属性。
watchPosition() 函数会返回一个 ID，唯一地标记该位置监视器。您可以将这个 ID 传给 clearWatch() 函数来停止监视用户位置。

navigator.geolocation.clearWatch(watchID); 

1.4 完整例子

<div id="myLocation"></div>

<span class="hljs-keyword">var</span> ml=<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"myLocation"</span>);
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getUserLocation</span>(<span class="hljs-params"></span>)</span>{
    <span class="hljs-keyword">if</span>(<span class="hljs-string">"geolocation"</span> <span class="hljs-keyword">in</span> navigator){
        <span class="hljs-keyword">var</span> options={
            <span class="hljs-attr">enableHighAccuracy</span>: <span class="hljs-literal">true</span>, 
    <span class="hljs-attr">maximumAge</span>: <span class="hljs-number">30000</span>, 
    <span class="hljs-attr">timeout</span>: <span class="hljs-number">27000</span>
    };     
         navigator.geolocation.getCurrentPosition(success,error,options);
        <span class="hljs-keyword">var</span> watchID = navigator.geolocation.watchPosition(success,error, options);
 }<span class="hljs-keyword">else</span>{
    ml.innerHTML=<span class="hljs-string">"您的浏览器不支持定位！"</span>;
     }
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">success</span>(<span class="hljs-params">position</span>)</span>{
<span class="hljs-keyword">var</span> coords=position.coords;
<span class="hljs-keyword">var</span> lat=coords.latitude;
<span class="hljs-keyword">var</span> lng=coords.longitude;
ml.innerHTML=<span class="hljs-string">"您当前所在的位置：经度"</span>+lat+<span class="hljs-string">";纬度："</span>+lng;
    <span class="hljs-comment">//只有firefox支持address属性</span>
    <span class="hljs-keyword">if</span>(<span class="hljs-keyword">typeof</span> position.address !== <span class="hljs-string">"undefined"</span>){  
    <span class="hljs-keyword">var</span> country = position.address.country;  
    <span class="hljs-keyword">var</span> province = position.address.region;  
    <span class="hljs-keyword">var</span> city = position.address.city;  
    ml.innerHTML +=<span class="hljs-string">"您的地址"</span> + country + province + city;  
}  
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">error</span>(<span class="hljs-params">error</span>)</span>{
<span class="hljs-keyword">switch</span>(error.code){  
    <span class="hljs-keyword">case</span> error.TIMEOUT:  
    ml.innerHTML=<span class="hljs-string">"连接超时，请重试"</span>;<span class="hljs-keyword">break</span>;  
    <span class="hljs-keyword">case</span> error.PERMISSION_DENIED:  
    ml.innerHTML=<span class="hljs-string">"您拒绝了使用位置共享服务，查询已取消"</span>;<span class="hljs-keyword">break</span>;  
    <span class="hljs-keyword">case</span> error.POSITION_UNAVAILABLE:  
    ml.innerHTML=<span class="hljs-string">"亲，非常抱歉，我们暂时无法为您提供位置服务"</span>;<span class="hljs-keyword">break</span>;  
}  
ml.style.color=<span class="hljs-string">"red"</span>;
}
<span class="hljs-built_in">window</span>.onload=<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
getUserLocation();
}