JavaScript 지리위치 API geolocation

🗓2020년 03월 05일 ∙ 🖊TutorialPost ∙ ⏳1분

navigator.geolocation 객체를 이용하면 사용자들의 위치 정보를 웹 사이트에서 사용할 수 있습니다. (IE9 이상). 웹브라우저는 사용자의 위치를 결정하기 위해 IP주소, 무선 네트워크, 셀룰러 데이터, GPS 등을 활용하게 되며 사용자의 브라우저 설정에 따라 개발자가 원하는 수준만큼 정확하지 않을 수 도 있습니다.

geolocation 객체 : 지리위치 API

geolocation 객체의 기본 사용법입니다.

/* geolocation 객체 */
// 사용자의 위치 정보를 리턴한다.
// @param {callback} success - 좌표를 얻어왔을 때 호출될 함수의 이름
// @param {callback} fail - 좌표를 얻지 못했을 때 호출될 함수의 이름
navigator.geolocation.getCurrentPosition(success, fail);

function success(location) {
  // Position 객체가 콜백함수에 전달된다.
  location.coords.latitude;
}

function fail(msg) {
  // PositionError 객체가 콜백함수에 전달된다.
  msg.code;
}

위치 정보 사용 가능 여부를 확인하고 요청하는 방법입니다.

/* 사용자 웹 브라우저의 geolocation 지원 여부를 확인 */
if (navigator.geolocation) {
  // 해당 기능이 지원되는 경우
  navigator.geolocation.getCurrentPosition(success, fail);
} else {
  // 기능을 지원하지 않거나 비활성화 된 경우
}

/* Modernizr 사용 시 */
if (Modernizr.geolocation) {
  // 브라우저가 지원할 경우
  navigator.geolocation.getCurrentPosition(success, fail);
} else {
  // 브라우저가 지원하지 않거나, 기능이 꺼져있다
}

Position 객체 및 Error 객체

/* 콜백함수에 전달되는 Position 객체 */
Position.coords.latitude	// 위도
Position.coords.longitude	// 경도
Position.coords.accuracy	// 정확도
Position.coords.altitude	// 고도
Position.coords.altitudeAccuracy	// 고도 정확도
Position.coords.heading		// 정북에서의 각도
Position.coords.speed		// 초당 진행속도
Position.coords.timestamp	// 정보가 생성된 시각

/* 콜백함수에 전달되는 PositionError 객체 */
PositionError.code		// 오류번호. 1-권한없음 / 2-사용불가능 / 3-타임아웃
PositionError.message	// 오류메시지
SHARE