走进HTML5-领略Geolocation的位置信息

1,644 阅读3分钟

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等

HTML5 提供了 geolocation API,用于提供位置相关服务。

地理位置 API 通过window.navigator.geolocation提供。在使用之前需要进行判断该对象是否存在,如果存在的话,那么位置信息可用

if ("geolocation" in navigator) {
  /* 地理位置信息可用 */
} else {
  /* 地理位置信息不可用 */
}

geolocation 获取当前定位

我们可以通过使用getCurrentPosition(success, error, options)函数获取用户当前定位位置。这会异步请求获取用户位置,并查询定位硬件来获取最新信息。当定位被确定后,定义的回调函数就会被执行。

nNYgyt.png

  • success:成功的回调函数(必须)
  • error:错误的回调函数
  • options:参数对象,通过该对象参数设置最长可接受的定位返回时间,等待请求的时间和是否精准定位。

success

// 特别注意:如果您使用的是谷歌浏览器,需要连接vpn才能获取到

let success = function(pos) {
  console.log(pos);
};

// 只传一个参数
window.navigator.geolocation.getCurrentPosition(success);

nNNTrq.png

  • Geoposition 对象属性
    • accuracy 定位精准度,单位 m
    • altitude 海拔
    • altitudeAccuracy 海拔精准度,单位 m
    • heading 方向
    • latitude 纬度
    • longitude 经度
    • speed 速度

error

let error = function(err) {
  console.log(err);
};

//传入错误回调函数
window.navigator.geolocation.getCurrentPosition(success, error);

nNU2O1.png

  • PositionError 对象属性
    • 用户拒绝 code === 1
    • 获取不到 code === 2
    • 连接超时 code === 3

config

const config = {
  // 是否需要高精度位置 默认为false
  enableHighAccuracy: true,
  // 请求超时时间,默认为 infinity,单位ms
  timeout: 1000,
  // 位置信息过期时间,设置为0就无条件获取新的地理位置信息,默认为 0,单位 ms
  maximumAge: 0
};

// 传入参数配置
window.navigator.geolocation.getCurrentPosition(success, error, config);

nNaDBt.png

这里的 code = 3,因为我们设置的请求超时时间为 1000ms,当浏览器在 1000ms 内没有成功的获取到信息的话,就会报连接超时错误

watchPosition 监听位置变化

// 用于注册监听器,在设备的地理位置发生改变的时候自动被调用
// 参数与 getCurrentPosition 相同
let id = geolocation.watchPosition();

在 watchPosition 方法定义使用后,则会不停的获取用户的地理位置信息,不停的更新用户的位置信息。

clearWatch

使用clearWatch(id)对 watch 清除监听


希望对读完本文的你有帮助、有启发,如果有不足之处,欢迎批评指正交流!

欢迎关注我的个人博客分享一些前端技术、面试题、面试技巧等

辛苦整理良久,还望手动点赞鼓励~


'摘抄'不是单纯的“粘贴->复制”,而是眼到,手到,心到的一字一句敲打下来。

博客声明:所有转载的文章、图片仅用于作者本人收藏学习目的,被要求或认为适当时,将标注署名与来源。若不愿某一作品被转用,请及时通知本站,本站将予以及时删除。