Day 21 - Geolocation

이번 과제는 위치 정보를 다룰 수 있는 navigator.geolocation을 사용한다. 그런데 크롬 브라우저에서는 지원하지 않고 사파리에서 디버깅 모드로 속도, 위치를 바꿔가며 실습할 수 있다는데 맥 개발 환경이 없어서 코드만 보고 끝냈다. (내년에 맥북 사야할 이유가 한가지 늘었다)

나침반인 arrow와 속도계인 speed가 모두 구현되어 있고, 위치 값을 이용하여 이를 조작하면 된다.

1
2
3
4
5
6
7
8
9
10
navigator.geolocation.watchPosition(
  (data) => {
    console.log(data);
    speed.textContent = data.coords.speed;
    arrow.style.transform = `rotate(${data.coords.heading}deg)`;
  },
  (err) => {
    console.error(err);
  }
);

watchPosition() 메소드를 활용하여 coords.speed 데이터와 coords.heading 데이터로 속도와 방향을 추출할 수 있다.