안녕하세요!

Derek 입니다 :)

오늘은.. 3개의 포스팅을 해야합니다..! 너무 밀린탓에 급하게 정리중이네요.
(과거의 나)

Day 21 project 입니다! 오늘은 약간 설명드리기 어려운 하자가 있는 주제에요. 이유는 차차 말씀드리겠습니다!

시작해볼게요.

21. Geolocation

목표

사용자의 위치와 방향, 속도를 인식하여 나침판을 만든다.

상당히.. 멋진 기능입니다! 하지만 window 에서는 구현은 되지만 임의대로 속도나 / 방향을 넣을 수가 없다고 합니다. ios 에서만 가능하다고 하네요!

그래도 기능은 한번 구현해보러 가볼까요?!

구현 코드

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

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

비교적 간단한걸 확인할 수 있어요.

기능별로 정리해볼게요.

01. 위치 확인 기능

기능이라고 해봤자.. 이거 하나인 것 같아요!

여기서 navigator.geolocation.watchPosition() 함수를 설명하자면,

Geolocation 인터페이스의 watchPosition() 메서드는 장치의 위치가 바뀔 때마다 자동으로 호출할 처리기 함수를 등록할 때 사용합니다. 선택적으로 오류 발생 시 사용할 콜백 함수도 지정할 수 있습니다.

따라서 익명함수인

(data) => {
  speed.textContent = data.coords.speed;
  arrow.style.transform = `rotate(${data.coords.heading}deg)`;
}, (err) => {
  console.log(err);
  alert("Beep");

를 위치가 바뀔때마다 수행하게 됩니다 :)

너무 간단해요. data 에는 coords 라는 객체가 있는데, 거기에 있는 speed 나 heading 을 사용하여 화면에 표시하기만 하는 함수입니다.

오류발생시 호출하는 부분도 구현됨을 알 수 있어요.

다만 임의적으로 사용자의 위치를 바꾸고 방향도 바꿀 수 있는게 Mac OS 만 가능해서, 직접 다뤄보지 못해서 아쉽네요.

오늘은 비교적 간단하지만 ios 에서만 테스트해볼 수 있어 아쉬운 주제를 다뤄봤습니다.

사용자의 위치나 방향, 속도를 사용할때는 navigator.geolocation.watchPosition 을 사용한다! 까지 정리해보았습니다.

틀린내용이나 수정할 내용이 있다면 언제든지 피드백 부탁드립니다!

감사합니다!🤗