[js] 현재 위치 받아오기 - Geolocation API

[js] 현재 위치 받아오기 - Geolocation API

자바스크립트에서 사용자의 현재 위치 정보를 브라우저에게 요청할 수 있는 방법으로 Geolocation API가 있다. 브라우저가 지원하는 Geolocation API는 navigator.geolocation으로 정의되어 있다.

 

 

현재 위치 받아오기

navigator.geolocation.getCurrentPosition() 메서드를 통해 현재 위치 정보를 받아올 수 있다. 메서드를 통해 현재 위치를 가져오는 것에 성공하면 GeolocationPosition 객체를 첫번째 콜백 함수의 매개변수로 전달하고 실패하면 두번째 콜백함수에 GeolocationPositionError 객체를 매개변수로 전달한다.

아래는 navigator.geolocation.getCurrentPosition() 으로 위치 정보를 받아올 때 호출되는 콜백 함수로 success 함수를 위치 정보를 가져오는데 실패했을 때 호출되는 콜백 함수로는 fail 함수를 실행시킨다. 

function success(pos) { // 위치 정보를 가져오는데 성공했을 때 호출되는 콜백 함수 (pos : 위치 정보 객체)
    const lat = pos.coords.latitude;
    const lng = pos.coords.longitude;
    console.log(`현위치 : ${lat}, ${lng}`);
}

function fail(err) { // 위치 정보를 가져오는데 실패했을 때 호출되는 콜백 함수
    alert('현위치를 찾을 수 없습니다.');
}

navigator.geolocation.getCurrentPosition(success, fail);

 

 

메서드의 반환값

속성	반환값
coords.latitude	소수로 표현된 위도 값
coords.longitude	소수로 표현된 경도 값
coords.accuracy	위도 값과 경도 값의 정확도
coords.altitude	평균 해수면을 기준으로 하는 고도 값(해발)
coords.altitudeAccuracy	고도 값의 정확도
coords.heading	북쪽을 기준으로 현재 진행 방향에 대한 시계방향으로의 각도 값(˚)
coords.speed	초당 이동한 미터 수를 나타내는 속도 값(초속)
timestamp	위치 정보를 가져온 시간을 나타냄.

 

 

 

 

 

 

 

 

 

 

 

https://www.zerocho.com/category/HTML&DOM/post/59155228a22a5d001827ea5d

https://www.zerocho.com/category/HTML&DOM/post/59155228a22a5d001827ea5d

http://www.tcpschool.com/html/html5_api_geolocation

코딩교육 티씨피스쿨

https://on1ystar.github.io/javascript/2021/01/24/JavaScript-4/

JavaScript 현재 위치, 날씨 정보 가져오기 · on1ystar