navigator.geolocation.getCurrentPosition( )
자바스크립트에서 지원하는 WEB API 중에 navigator.geolocation 가 있는데,
이 API의 getCurrentPosition( ) 함수를 실행함으로써 현재 위치와 시간을 받아올 수 있다.getCurrentPosition( )의 인자는 success / error / [options]이다.
인자에 대한 자세한 설명 : https://developer.mozilla.org/ko/docs/Web/API/Geolocation/getCurrentPosition
success 함수는 Geoposition 객체를 매개변수로 받는 함수이다.
Geoposition 객체에는 컴퓨터의 위치 정보와 시간 정보가 담겨있으므로,
success 함수를 호출함으로써 위치와 시간에 접근할 수 있다.
Geoposition 객체의 구성은 아래와 같다.
코드
사용 예시는 아래와 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geolocation example - watchPosition()</title>
</head>
<body>
<script>
function success({ coords, timestamp }) {
const latitude = coords.latitude; // 위도
const longitude = coords.longitude; // 경도
alert(`위도: ${latitude}, 경도: ${longitude}, 위치 반환 시간: ${timestamp}`);
}
function getUserLocation() {
if (!navigator.geolocation) {
throw "위치 정보가 지원되지 않습니다.";
}
navigator.geolocation.watchPosition(success);
}
getUserLocation();
</script>
</body>
</html>코드 출처 : Javascript - 실시간으로 위치를 확인하는 Geolocation의 사용 방법을 알아보자 (tistory.com)
Javascript - 실시간으로 위치를 확인하는 Geolocation의 사용 방법을 알아보자
자바스크립트를 통해 사용자의 위치 정보를 알아내는 방법은 Geolocation를 사용하는 것입니다. Geolocation API는 사용자의 현재 위치를 가져오는 API로 주로 사용자 위치를 지도에 표시할 때 사용하거
7942yongdae.tistory.com
주의사항
navigator.geolocation은 보안상의 이유로 HTTPS & localhost에서만 사용 가능하다.
따라서 navigator.geolocation의 지원이 보장되는지 확인하기 위해서
if(!navigator.geolocation){ } 구문으로 지원되지 않을 때의 처리도 해주어야 한다.
function getUserLocation() {
if (!navigator.geolocation) {
throw "위치 정보가 지원되지 않습니다.";
}
navigator.geolocation.getCurrentPosition(success);
}