H5 navigator.geolocation 获取定位

最新推荐文章于 2025-10-15 17:10:02 发布

原创最新推荐文章于 2025-10-15 17:10:02 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文介绍了浏览器原生的navigator.geolocationAPI的getCurrentPosition方法，详细讲解了如何获取设备地理位置信息，包括坐标、精度、速度等，并处理可能遇到的错误情况和配置选项。

navigator.geolocation 有三个方法：getCurrentPosition(), watchPosition(), clearWatch()

getCurrentPosition() 是一个浏览器原生的API，用于获取设备的地理位置信息,具体的使用方法如下:

navigator.geolocation.getCurrentPosition(successCallback,  errorCallback, options);

const successCallback = (position)=>{
       const { longitude, latitude, accuracy, altitude, altitudeAcuracy,
             heading, speed, timestamp} = position;

       console.log(
           `经度为${longitude}, 纬度为${latitude}, 
           准确度为${accuracy},海拔为${altitude},
           海拔准确度为${altitudeAcuracy},行进方向为${heading},
           地面速度为${speed},请求时间为${new Date(timestamp)}` 
       );
}

const errorCallback = (error)=>{
    let message = ""
    switch (error.code) {
           case error.PERMISSION_DENIED:
                message = "用户拒绝对获取地理位置的请求。"
                break;
           case error.POSITION_UNAVAILABLE:
                message = "位置信息是不可用的。"
                break;
           case error.TIMEOUT:
                message = "请求用户地理位置超时。"
                break;
           case error.UNKNOWN_ERROR:
                message = "未知错误。"
                break;
            default: 
                message = error.mesaage;
    }

}

const options = {
    enableHighAccuracy: true, //是否获取高精度经纬度，默认值为false
    timeout: 5000, //获取位置信息的超时时间。单位为毫秒（ms），默认值为不超时
    maximumAge: 0, //获取位置信息的缓存时间。单位为毫秒（ms），默认值为0（立刻更新获取）。如果        设备缓存的位置信息超过当前指定的缓存时间，将重新更新位置信息后再返回。
    provider: "system",/*(String)优先使用的定位模块。 "system"：系统定位模块，支持wgs84坐标系； "baidu"：百度定位模块，支持gcj02/bd09/bd09ll坐标系； 
            "amap"：高德定位模板，支持gcj02坐标系。 默认值按此优先（amap>baidu>system），若指定的provider不存在或无效则返回错误回调。 
            ps：百度/高德定位模块需要配置百度/高德地图相关参数才能正常使用。平台支持Android - 2.2+ (支持)，iOS - 4.5+ (支持): provider为“baidu”时，
            仅支持bd09ll坐标系，暂不支持高德定位模块。*/
    coordsType: "wgs84",/*指定获取的坐标系类型。可选值为： “wgs84”：WGS-84坐标系；
             “gcj02”：国测局经纬度坐标系； “bd09”：百度墨卡托坐标系； “bd09ll”：百度经纬度坐标系； 
              provider为“system”时，默认使用“wgs84”；provider为“baidu”时，默认使用“bd09ll”。 
              如果设置的坐标系类型provider不支持，则返回错误。*/

    geocode: true,/*是否解析地址信息。解析的地址信息保存到Position对象的address、addresses属性中，
           true表示解析地址信息，false表示不解析地址信息，返回的Position对象的address、addresses属性值为undefined，默认值为true。 
           如果解析地址信息失败则返回的Position对象的address、addresses属性值为null。*/
}