不常用的浏览器 API —— Geolocation

1,903 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第17天,点击查看活动详情

这一节来看 Geolocation API,这部分 API 是和地理位置相关的,我们可以在 Web 应用中获取用户的地理位置信息,当然需要用户授权。下面来看一下这部分能力。

我们可以通过 navigator.geolocation 来访问地理位置对象,geolocation 上面提供了一些访问用户位置的 API,下面看一下几个常用的方法:

getCurrentPosition

这是最常用的一个方法,用来获取用户当前位置信息,首次访问会给用户弹出请求位置信息的弹窗,点击允许后会异步读取用户的地理位置数据,然后 resolve 位置信息,这时请求到的是一个低精度的数据,这个值是基于用户 IP 的(区别于高精度数据,高精度数据需要调用 GPS,需要更长时间)。

navigator.geolocation.getCurrentPosition((position) => {});

watchPosition

另一个重要的方法是 watchPosition,这个方法可以检测位置变化,可以动态的获取用户的位置,这个 API 的调用不依赖 getCurrentPosition,你可以直接调用 watchPosition 进行监测:

navigator.geolocation.watchPosition((position) => {});

每一个用户位置返回的是一个 Position 对象,上面的关键属性是 coords,它表示地理位置上的坐标数据,至于数据到实际位置的信息我们可以调用一些地图服务来完成转换,这是一个符合标准的数据。

剩下的就是处理异常了,位置获取还是一个比较容易失败的场景,当无法返回正确信息时,Promise 会 reject 一错误对象,我们可以捕获这个错误来编写异常程序。

需要注意的是,在某些旧的浏览器里,通过 ”geolocation” in navigator 来判断是否支持位置 API 可能会始终返回 true,因此这里的返回不可靠,需要兼容旧版本浏览器时要关注。