Geolocation API는 위도와 경도같은 현재 위치 정보를 검색하는 API로, 이 기능을 사용하기 위해서는 반드시 개인정보의 사용 허가가 필요하다. Geolocation API는 window.navigator.geolocation 객체를 통해 사용할 수 있다.
- navigator.geolocation.getCurrentPosition(성공시 함수, 에러시 함수 , 옵션);
사용자의 현재 위치를 얻을 수 있다. 성공 시 함수는 위치 정보를 얻는 것을 성공했을 때 GeolocationPosition 객체를 매개변수로 받는 콜백함수를 이야기하며, 에러시 함수는 위치 정보를 얻는 것을 실패했을 때 GeolocationPositionError 객체를 매개 변수로 받는 콜백함수이다.
개인정보의 사용 허가 알람이 뜨고, 그 이후 허용을 누르면 사용자의 위치에 대한 정보를 얻을 수 있다. 허용을 누르고 Geolocation에 대한 내용을 살펴보자면, 콜백 함수에서 나오는 위치 정보를 나타내는 다양한 값이 있는 것을 알 수 있다. 값을 얻을 수 없을 경우 null값을 반환한다.
위치 정보 값
| 위치 정보 | 설명 |
| event.coords.accuracy | 위도 및 경도의 정밀도를 반환한다. (단위 : 미터) |
| event.coords.altitude | GPS고도를 반환한다. (단위 : 미터) |
| event.coords.altitudeAccuracy | GPS고도의 정밀도를 만환한다. (단위: 미터) |
| event.coords.heading | 진행 방향을 0부터 360 사이의 수치로 반환한다. (단위 : 도) 북: 0도, 동: 90도, 남: 180도, 서: 270도 |
| event.coords.latitude | 위도를 수치로 반환한다. (단위: 도) |
| event.coords.longitude | 경도를 수치로 반환한다. (단위: 도) |
| event.coords.speed | 이동 속도를 수치로 반환한다. (단위: m/s) |
| event.coords.timestamp | 위치 정보를 얻었을 때의 시간을 나타낸다. |
위치 정보를 얻지 못했을 때 처리
| 처리 | 설명 |
| event.code | 현재오류를나타내는코드번호를반환한다. 1: 위치 정보 수집 허가를 얻지 못한 경우(PERMISSION_DENIED) 2: 위치정보를 얻지 못한 경우(POSITION_UNAVALABLE) 3: 타임아웃이 발생한 경우(TIMEOUT) |
| event.message | 오류 내용을 텍스트로 반환 |
| event.PERMISSION_DENIED | 항상 1을 반환 |
| event.POSITION_UNAVALABLE | 항상 2를 반환 |
| event.TIMEOUT | 항상 3을 반환 |
위치정보 권한을 거부했을 때, 위치정보를 얻지 못해서 show_error함수가 시행되었다. 1이 나왔는데 이는 위치정보 수집허가를 얻지 못해서 나온 코드이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
navigator.geolocation.getCurrentPosition(
// 위치 정보를 얻었을 때 실행할 함수
show_location,
// 위치 정보를 얻지 못했을 때 시행할 함수
show_error
);
function show_location(){
console.log("위치 확인 완료")
};
function show_error(event){
console.log(event.code); // 1
console.log(event.message); //User denied Geolocation
};
</script>
</body>
</html>옵션 매개 변수
| 매개변수를 정의하기 위한 속성 | 설명 |
| enableHighAccuracy | true를 지정하면 브라우저에 정확한 위치정보를 요청한다. (기본값 : false) |
| timeout | 위치정보를 얻을때 까지 기다릴 시간을 밀리초단위로 지정한다. |
| maximumAge | 캐시된 위치정보의 유효시간(밀리초)을 지정한다. (기본값 : 0) |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function show_location() {
console.log("위치 확인 완료")
};
function show_error(event) {
console.log(event.code);
console.log(event.message);
};
let position_options = {
//정확한 위치 요청
enableHighAccuracy: true,
//위치 정보를 얻을 때까지 기다릴 시간
timeout: 20000,
//캐시 유효 기간
maximumAge: 0
}
navigator.geolocation.getCurrentPosition(
// 위치 정보를 얻었을 때 실행할 함수
show_location,
// 위치 정보를 얻지 못했을 때 시행할 함수
show_error,
// 위치 정보에 대한 옵션 인자
position_options
);
</script>
</body>
</html>'Frontend > JavaScript' 카테고리의 다른 글
| JavaScript : 비동기 통신에 대해서 (Fetch & Axios) (0) | 2024.08.14 |
|---|---|
| JavaScript : 비동기를 처리하는 방법 (Async / Await) (0) | 2024.08.13 |
| JavaScript : DOM의 키보드 이벤트에 대해서 (0) | 2024.08.12 |
| JavaScript : 비동기를 처리하는 방법 (Promise) (0) | 2024.08.11 |
| JavaScript 내장함수 : Object관련 내장함수 (0) | 2024.08.10 |
| JavaScript : Symbol에 대해서 알아보자 (0) | 2024.08.06 |
| JavaScript : 사용자 지정 데이터 특성(dataset)을 이용해보자 (0) | 2024.08.05 |
| JavaScript : 구조분해할당(Distructuring)에 대해 알아보자 (1) | 2024.08.05 |