HTML5——Geolocation对象的getCurrentPosition()、watchPosition(）、clearWatch()方法

港控/mmm° 2022-05-11 03:18 141阅读 0赞

**1.window.navigator.geolocation获取Geolocation对象**

![70][]

**2. getCurrentPosition()方法：获取当前位置信息**

纬度：latitude

经度：longitude

海拔：altitude

定位精准度（单位：米）：accuracy，定位时以网络IP的位置为准。

海拔精准度（单位：米）：altitudeAccuracy

方向：heading

速度：speed

**3. 当调用getCurrentPosition()方法的时候，加载页面时，会有如下弹窗：**

![70 1][]

**4. 定位用户的位置**

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

**5. 浏览器支持**

Internet Explorer 9、Firefox、Chrome、Safari 以及 Opera 支持地理定位。

注释：对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。

**6. HTML5 - 使用地理定位**

请使用 getCurrentPosition() 方法来获得用户的位置。

下例是一个简单的地理定位实例，可返回用户位置的经度和纬度。

![70 2][]

例子解释：

*  检测是否支持地理定位
 *  如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
 *  如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
 *  showPosition() 函数获得并显示经度和纬度

**7. 处理错误和拒绝**

getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数：

function showError(error) {
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        x.innerHTML = "User denied the request for Geolocation."//code == 1 用户拒绝
                        break;
                    case error.POSITION_UNAVAILABLE:
                        x.innerHTML = "Location information is unavailable."//code == 2 无法获取
                        break;
                    case error.TIMEOUT:
                        x.innerHTML = "The request to get user location timed out."//code == 3 请求超时
                        break;
                    case error.UNKNOWN_ERROR:
                        x.innerHTML = "An unknown error occurred." //一个未知的错误
                        break;
                }
            }

错误代码：

*  Permission denied - 用户不允许地理定位
 *  Position unavailable - 无法获取当前位置
 *  Timeout - 操作超时

**8. getCurrentPosition() 方法 - 返回数据**

若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。

<table> 
 <tbody> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>coords.latitude</td> 
   <td>十进制数的纬度</td> 
  </tr> 
  <tr> 
   <td>coords.longitude</td> 
   <td>十进制数的经度</td> 
  </tr> 
  <tr> 
   <td>coords.accuracy</td> 
   <td>位置精度</td> 
  </tr> 
  <tr> 
   <td>coords.altitude</td> 
   <td>海拔，海平面以上以米计</td> 
  </tr> 
  <tr> 
   <td>coords.altitudeAccuracy</td> 
   <td>位置的海拔精度</td> 
  </tr> 
  <tr> 
   <td>coords.heading</td> 
   <td>方向，从正北开始以度计</td> 
  </tr> 
  <tr> 
   <td>coords.speed</td> 
   <td>速度，以米/每秒计</td> 
  </tr> 
  <tr> 
   <td>timestamp</td> 
   <td>响应的日期/时间</td> 
  </tr> 
 </tbody> 
</table>

**9. options对象中的参数配置**

var options = \{

enableHighAccuracy: true,//是否获取更精确的位置

timeout: 6000,//请求超时时间,单位ms；

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>test</title>
    </head>
    
    <body>
        <div id="demo" style="width:200px;height:50px;border:1px solid black;"></div>
        <script>
            var x = document.getElementById("demo");
    
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                } else {
                    
                    x.innerHTML = "Geolocation is not supported by this browser.";
                }
            }
    
            function showPosition(position) {
                console.log(111);
                x.innerHTML = "Latitude: " + position.coords.latitude +
                    "<br />Longitude: " + position.coords.longitude;
            }
    
            function showError(error) {
                console.log(error);
                switch (error.code) {
                    case error.PERMISSION_DENIED:
                        x.innerHTML = "User denied the request for Geolocation."//code == 1 用户拒绝
                        break;
                    case error.POSITION_UNAVAILABLE:
                        x.innerHTML = "Location information is unavailable."//code == 2 无法获取
                        break;
                    case error.TIMEOUT:
                        x.innerHTML = "The request to get user location timed out."//code == 3 请求超时
                        break;
                    case error.UNKNOWN_ERROR:
                        x.innerHTML = "An unknown error occurred." //一个未知的错误
                        break;
                }
            }
            var options = {
                enableHighAccuracy: true,//是否获取更精确的位置
                timeout: 6000,//请求超时时间,单位ms；
            }
            window.navigator.geolocation.getCurrentPosition(showPosition, showError, options);
        </script>
    </body>
    
    </html>

![70 3][]

**getCurrentPosition方法小结：只有当成功的获取地理位置时，才会触发成功的回调函数；失败的回调函数有三种情况：用户拒绝、浏览器不让获取（隐私）、网络请求超时；对象options中配置了精准定位、请求时间；**

**10. watchPosition()方法：不停的获取和更新用户的地理位置信息，执行间隔时间0ms；当设备地理位置发生改变时，自动调用；**

**clearWatch(唯一标识)方法：清除某个watchPosition()。**

<div id="demo" style="width:200px;height:50px;border:1px solid black;"></div>
        <script>
            var x = document.getElementById("demo");
            //成功的回调函数
            function getLocation() {
                if (navigator.geolocation) {
                    navigator.geolocation.watchPosition(showPosition);
                } else {
                    x.innerHTML = "Geolocation is not supported by this browser.";
                }
            }
            function showPosition(position) {
                x.innerHTML = "Latitude: " + position.coords.latitude +
                    "<br />Longitude: " + position.coords.longitude;
            }
            //失败的回调函数
            function showError(error){
                console.log(error);
            }
            //配置参数对象
            var options = {
                maximumAge:0,//设置watchPosition()方法执行时间，单位ms，默认0ms
            }
            var watch1 = window.navigator.geolocation.watchPosition(getLocation, showError, options);
            //清除watch1
            window.navigator.geolocation.clearWatch(watch1);
        </script>

[70]: /images/20220511/bf2317738f094129b94ef104152009d6.png
[70 1]: /images/20220511/c4e3ea42a60f48bfb01666dcb4d00155.png
[70 2]: /images/20220511/4bbf1ddced0c44dba63045932b71cb2b.png
[70 3]: /images/20220511/e434374c376c43c39faa731713a891f8.png