在Github上看到了wesbos的一个Javascript30天挑战的repo，旨在使用纯Js来进行练习，不允许使用任何其他的库和框架，该挑战共30天，我会在这里记录下自己练习的过程和遇到的问题。

第21天的目的是练习NavigatorGeolocation.geolocation这一webAPI的使用，通过使用此API可以访问到设备的位置信息。这允许网站或应用根据用户的位置提供个性化结果。

线上例子 建议打开电脑上移动端的模拟器或者直接用手机体验位置信息 该功能仅仅在https模式下才可正常使用

    const arrow = document.querySelector('.arrow');
    const speed = document.querySelector('.speed-value');

    navigator.geolocation.watchPosition((data) => {
      console.log(data);
      speed.textContent = data.coords.speed;
      arrow.style.transform = `rotate(${data.coords.heading}deg)`;
    }, (err) => {
      console.error(err);
    });

可以看到只要通过调用navigator.geolocation的watchPosition方法就可以获取到位置的信息。

在此获取到的信息为data，以回调函数的形式返回，当获取到位置信息之后，在动态的修改页面中speed显示的内容和指南针旋转的角度。

Geolocation.watchPosition() 用于注册监听器，在设备的地理位置发生改变的时候自动被调用。也可以选择特定的错误处理函数。

该方法会返回一个 ID，如要取消监听可以通过 Geolocation.clearWatch() 传入该 ID 实现取消的目的。

--- Geolocation API in MDN

除了watchPosition()方法，还有一个getCurrentPosition()方法，不过getCurrentPosition()方法只可获取一次当前的位置。

这两个方法都可以接受三个参数，第一个参数为成功时得到位置信息时的回调函数，使用Position对象作为唯一的参数。；第二个参数为获取位置信息失败时的回调函数，是一个可选项；第三个参数是一个可选的PositionOptions对象。

返回的数据中accuracy代表位置的精确度；heading代表指南针应该所指的角度；latitude和longitude分别代表位置的经纬度；speed代表当前位置的高度。

这个练习就到这里结束了，主要还是要学会查看文档，不断的自我学习。💪

→ MDN