JS30 Day 21 & 22：Geolocation & Follow Along Link Hig

今天两个章节写在一起，因为两个份量都算较少，首先我们来分享Day21的章节。
此章节功能是利用Geolocation API，取得我们目前位置的经纬度、方向、速度等等，如下图，当我们在移动时，会显示我们的移动速度，且座标会依我们的移动方向做转动，而由于隐私权关係，在使用前依然会询问我们是否要开启location，而此功能在Web装置上较不常用，大多是使用在手机装置上。

navigator.geolocation.getCurrentPosition():获取当前的位置，只会触发一次

navigator.geolocation.watchPosition():主要用于侦测移动中的位置，在移动时会一直触发

navigator.geolocation.clearWatch() 这个函式是用来取消，Geolocation.watchPosition() 注册的函式。

Geolocation Property:为Geolocation提供的一些属性，可用来获取我们所要的资料。

此处用到两个属性:

coords.heading:目前前进方向的角度，以北方为0度顺时针计算。

coords.speed:目前的速度(公尺/秒)。

  <script>    const arrow = document.querySelector('.arrow');    const speed = document.querySelector('.speed-value');    // navigator.geolocation.getCurrentPosition((position))    // let watch = navigator.geolocation.watchPosition((data)     let watch = 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.clearWatch(watch);    });  </script>

再来是Day22的部分，此章节要达到的功能就是当我们滑鼠移入至a标籤的字时，会对其字动态反白及一些样式，而我们在这边也分为区域性的移入样式套用，及全域性的。

首先，我们在html部分新增一个span以来增添样式至我们移入的字上。

  <nav>    <ul class="menu">      <!-- 设置一个highlight去将样式套在我们滑鼠所移至的字 -->      <span class="highlight"></span>      <li><a href="">Home</a></li>      <li><a href="">Order Status</a></li>      <li><a href="">Tweets</a></li>      <li><a href="">Read Our History</a></li>      <li><a href="">Contact Us</a></li>    </ul>  </nav>

在js部分，我们获取所有在menu标籤为a的字，还有要反白的样式span，并且将我们样式先做隐藏。

      let target = document.querySelectorAll('.menu a');      let highlight = document.querySelector('span');      highlight.style.display = "none";

再来，对我们的字增添滑鼠移入的事件及函数。

      target.forEach((e) => {        e.addEventListener('mouseenter', enterHandler)      })

区域範围(较常用到)

getBoundingClientRect:取得元素「相对于视窗」的座标，并回传一个 DOMRect 物件，其中包含了x/y/width/height/top/right/bottom/left 等属性。

当滑鼠移入时做函数处理，获取当前移入字的位置、宽度、高度等，并利用style直接写入，注意当我们滚动画面时，因为top,left是以当前整个页面的位置去做计算，因此会跑版，所以我们要改利用offsetTop/Left来获取当前视窗离上面及左边的距离，这样即不会造成跑版。

      function enterHandler(e) {        console.log(this.getBoundingClientRect());        // DOMRect {x: 263.9750061035156, y: 100, width: 52.6875, height: 28.399999618530273, top: 100, …}        let {          width,          height,          top,          left        } = this.getBoundingClientRect();        highlight.style.display = "";        highlight.style.width = width + "px";        highlight.style.height = height + "px";        // highlight.style.top = top + "px";        // highlight.style.left = left + "px";        // 假如滚动页面，利用offset就不会跑掉        highlight.style.top = this.offsetTop + "px";        highlight.style.left = this.offsetLeft + "px";      }

全域範围

而当我们想为全部a标籤的字做移入的处理，且在做视窗大小调整时，也不会跑版，首先要将我们的span移入至外层。

  <nav>    <!-- 设置一个highlight去将样式套在我们滑鼠所移至的字 -->    <span class="highlight"></span>    <ul class="menu">      <li><a href="">Home</a></li>      <li><a href="">Order Status</a></li>      <li><a href="">Tweets</a></li>      <li><a href="">Read Our History</a></li>      <li><a href="">Contact Us</a></li>    </ul>  </nav>

接着在js部分，我们新增一个now用来记录当前指向的字。

      let now = null;      let target = document.querySelectorAll('a');      let highlight = document.querySelector('span');      highlight.style.display = "none";

再来，我们对视窗大小的调整增添事件函数处理。

      // 当调整视窗大小时触发，做RWD也能不跑版      window.addEventListener('resize', setPosition)      target.forEach((e) => {        e.addEventListener('mouseenter', enterHandler)      })

而滑鼠移入的事件函数处理，当我们移入时，就将当前的字this纪录至now，并呼叫套用样式的函数。

      function enterHandler() {        // 纪录当前移入的字        now = this;        setPosition();      }

我们将套用样式的函数，封装起来做字位置及相关资料获取，而在滚动页面时，我们在top,left部分加上window.scrollY/X，也就是当前滚动的距离，这样即可达到不会跑版的效果。

      function setPosition() {        // 如果没有移入字就跳出        if (!now) return        let {          width,          height,          top,          left        } = now.getBoundingClientRect();        highlight.style.display = "";        highlight.style.width = width + "px";        highlight.style.height = height + "px";        // Window.scrollY / scrollX        // 返回视窗在垂直/水平方向已滚动的像素值        // 假如滚动页面，利用原本的座标位置，再加上scrollX/Y就不会跑掉        highlight.style.top = top + window.scrollY + "px";        highlight.style.left = left + window.scrollX + "px";      }