Geolocation

목표

나침반과 현재속도를 출력

기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width">
</head>
<body>
  <h1 class="speed">
    <span class="speed-value">0</span>
    <span class="units">KM/H</span>
  </h1>

  <style>
    html {
      font-size: 100px;
    }
    body {
      margin: 0;
      font-family: sans-serif;
      min-height:100vh;
      display:flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background:
        radial-gradient(black 15%, transparent 16%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
      background-color:#282828;
      background-size:16px 16px;
      background-attachment: fixed;
    }

    .arrow {
      width:250px;
      overflow: hidden;
      transition: all 0.2s;
      transform:rotate(0deg);
      display: inline-block;
    }

    h1 {
      color:white;
      font-weight: 100;
      font-size: 60px;
      display:flex;
      align-items: center;
    }

    .units {
      font-size: 15px;
    }
    /*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
  </style>
  <script>
  </script>
</body>
</html>

과정

  1. 상수 선언
  2. 현재위치, 속도 값 얻는 함수 생성 및 출력

코드 분석

  1. 상수 선언

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

    arrowspeed에 요소들을 선택

  2. 현재위치, 속도 값 얻는 함수 생성 및 출력

    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으로 geolocation API를 사용 가능하며 watchPosition으로 현재 위치를 식별하는데 사용되며 data.coords.speed로 현재 속도를 알아내 HTML 요소에 바인딩함

찾아본 내용, 알게된 내용들

geolocation API - 웹 어플리케이션에서 사용자의 위치 정보를 받아 제공, 나침반이나 속도계를 만들 때 사용할 수 있음

'개발 > JavaScript30' 카테고리의 다른 글

23. Speech Synthesis  (0) 2017.04.18
22. Following Along Link Highlight  (0) 2017.04.18
21. Geolocation  (0) 2017.04.17
20. Native Speech Recognition  (1) 2017.04.17
19. Webcam Fun  (0) 2017.04.17
18. Adding Up Times with Reduce  (0) 2017.04.16

+ Recent posts