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

最新推荐文章于 2024-09-12 13:49:04 发布

叨唠

最新推荐文章于 2024-09-12 13:49:04 发布

阅读量1.6w

点赞数 1

分类专栏：前端web HTML5 文章标签： web前端 HTML5 Geolocation

本文链接：https://blog.csdn.net/zyz00000000/article/details/82774543

版权

前端web 同时被 2 个专栏收录

66 篇文章 2 订阅

订阅专栏

HTML5

19 篇文章 0 订阅

订阅专栏

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

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

纬度：latitude

经度：longitude

海拔：altitude

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

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

方向：heading

速度：speed

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

4. 定位用户的位置

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

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

5. 浏览器支持

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

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

6. HTML5 - 使用地理定位

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

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

例子解释：

检测是否支持地理定位
如果支持，则运行 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 属性。如果可用，则会返回其他下面的属性。

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

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>

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>