반응형
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. 상수 선언
const arrow = document.querySelector('.arrow');
const speed = document.querySelector('.speed-value');arrow와 speed에 요소들을 선택
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 - 웹 어플리케이션에서 사용자의 위치 정보를 받아 제공, 나침반이나 속도계를 만들 때 사용할 수 있음