地理位置服务—navigator.geolocation

云言 • 2022-11-13 • 前端开发 • 645 阅读 
    使用navigator.geolocation对象来获取位置信息，geolocation对象包含一系列相关位置操作方法
    需要选择IE9及以上的浏览器
    一般流程：
        1.用户从浏览器打开位置感应应用程序
        2.程序执行，geolocation对象获取位置信息，此时浏览器要求用户授权同意才可以获得信息
        3.浏览器内部通过数据源获取信息
        4.浏览器将获取的信息发送给受信任的外部定位服务，返回位置信息到geolocation应用程序
    操作方法：
        navigator.geolocation包含三个方法：
        获取当前地址信息（请求一次）
        getCurrentPosition(successCallback, errorCallback, positionOptions)
        监视当前地理位置（请求多次）
        watchPosition(successCallback, errorCallback, positionOptions)
        清除监视功能
        clearWatch(watchId)
    
    getCurrentPosition(successCallback, errorCallback, positionOptions)
        successCallback 回调函数接受一个参数：位置对象。这个对象包含坐标(coords属性)和一个获取位置数据时的时间戳
            coords属性：
                coords.latitude  十进制数的纬度
                coords.longitude  十进制数的经度
                coords.accuracy  所提供的以米为单位的经度和纬度估计的精确度
                coords.altitude  海拔，海平面以上以米计
                coords.altitudeAccuracy  所提供的以米为单位的高度估计的精确度
                coords.heading  宿主设备当前移动的角度方向，相对于正北方向顺时针计算
                coords.speed  以米每秒为单位的设备的当前对地速度
            timestamp  响应的日期/时间
        errorCallback 接受错误对象作为参数，包含code属性、message信息
            code属性：
                1. 当属性值为1时，用户不允许地理定位（拒绝授权），“Permission denied”。
                2. 当属性值为2时，无法获取当前位置，“Position unavailable”。
                3. 当属性值为3时，操作超时，“Timeout”
            message属性：属性值是一个字符串，包含了错误信息，这个错误信息在我们开发和调试时非常有用
        positionOptions 是一个可选属性的列表，说明如下：
            enableHighAccuracy : 启用高精确度模式，这个参数通知浏览器启用HTML5
            Geolocation : 服务的高精确度模式，默认值为false
            timeout ： 超时限制（单位为毫秒）。如果在该时间内为获取到地理位置信息，则返回错误
            maximumAge ： 表示浏览器重新计算位置的时间间隔，单位为ms，默认值为零，这意味着浏览器每次请求都必须重新计算位置
    watchPosition(successCallback, errorCallback, positionOptions)
        使用该方法可以定期获取用户地理位置信息，该方法与getCurrentPosition方法类似，这里调用会返回一个数字，
        该数字与setInterval方法的返回值用法类似，可以被clearWatch方法使用，以停止对当前地理位置信息的监视。
    clearWatch(watchId)
        如果应用程序不需要再接受watchPosition的持续位置更新，则只需要调用clearWatch()函数,watchId是watchPosition函数的返回值

代码实现：

1. 判断浏览器是否支持Geolocation API
2. 调用navigator.geolocation下的方法获取位置信息
3. 对成功或失败设置回调函数
4. 设置回调函数的输出信息

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p id="demo">点击按钮获取您当前坐标：</p>
    <button onclick="getLocation()">按钮</button>
    <script>
        var x = document.getElementById("demo");

        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition, showError);
            } else {
                x.innerHTML = "该浏览器不支持获取地理位置。";
            }
        }

        function showPosition(position) {
            x.innerHTML = "纬度: " + position.coords.latitude +
                "<br>经度: " + position.coords.longitude +
                "<br>位置精度: " + position.coords.accuracy +
                "<br>海拔: " + position.coords.altitude +
                "<br>位置的海拔精度: " + position.coords.altitudeAccuracy +
                "<br>方向: " + position.coords.heading +
                "<br>速度: " + position.coords.speed;
        }

        function showError(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    x.innerHTML = "用户拒绝对获取地理位置的请求。"
                    break;
                case error.POSITION_UNAVAILABLE:
                    x.innerHTML = "位置信息是不可用的。"
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "请求用户地理位置超时。"
                    break;
                case error.UNKNOWN_ERROR:
                    x.innerHTML = "未知错误。"
                    break;
            }
        }
    </script>
</body>

</html>

 

 

文章参考：

CSDN：https://blog.csdn.net/tongkongyu/article/details/117826807

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/geolocation

 

|| 版权声明
作者：云言
链接：https://yyink.cn/archives/330.html
声明：如无特别声明本文即为原创文章仅代表个人观点，版权归《云言博客》所有，欢迎转载，转载请保留原文链接。
THE END
分享
二维码
海报
地理位置服务—navigator.geolocation
使用navigator.geolocation对象来获取位置信息，geolocation对象包含一系列相关位置操作方法 需要选择IE9及以上的浏览器 一般流程： 1……
<<上一篇
下一篇>>