地理位置服务——navigator.geolocation

最新推荐文章于 2024-01-31 10:53:53 发布

原创

最新推荐文章于 2024-01-31 10:53:53 发布 · 9.1k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #定位

本文详细介绍了如何使用HTML5的Geolocation API来获取用户的地理位置信息，包括getCurrentPosition、watchPosition和clearWatch方法的使用，以及处理用户授权、错误处理和位置信息的详细内容。同时，提供了示例代码展示如何在网页中实现位置信息的获取和显示。此外，还提到了浏览器支持和安全性问题，强调了在用户许可的前提下进行位置获取的重要性。

    使用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. 设置回调函数的输出信息