minstudio

Geolocation API

사용자의 현재 위치 파악

Geolocation API는 사용자의 동의 하에 현재 기기의 지리적 위치(위도, 경도 등) 정보에 접근할 수 있게 해주는 기능입니다. 지도 애플리케이션(Google Maps, Kakao Map), 내 주변 배달 음식점 찾기, 날씨 서비스 등 위치 기반 서비스(LBS)를 구축하는 데 필수적입니다.

개인정보 보호가 매우 중요하므로, 이 API는 반드시 안전한 컨텍스트(HTTPS)에서만 작동하며, 브라우저는 위치 정보를 가져오기 전 사용자에게 권한 허용 팝업을 표시합니다.

Map ServiceGeolocation APIBrowserUserMap ServiceGeolocation APIBrowserUsernavigator.geolocation.getCurrentPosition() 호출위치 정보 제공 권한 요청 팝업허용 (Allow)GPS 또는 IP 기반 위치 삼각측량Position 객체 반환 (위도, 경도)좌표 전달 후 지도 렌더링
// Geolocation API를 사용하여 현재 위치 가져오기

function getLocation() {
  if (navigator.geolocation) {
    // getCurrentPosition: 현재 위치를 한 번만 가져옵니다.
    // watchPosition: 기기가 이동할 때마다 위치를 계속 추적합니다.
    console.log("위치 정보 요청 중... (사용자 동의 필요)");
    
    // 모의 성공 콜백
    const mockSuccess = (position) => {
      const latitude = position.coords.latitude;
      const longitude = position.coords.longitude;
      console.log(`위치 확인 됨 - 위도: ${latitude}, 경도: ${longitude}`);
    };
    
    const mockError = (error) => {
      switch(error.code) {
        case error.PERMISSION_DENIED:
          console.error("사용자가 위치 정보 제공을 거부했습니다.");
          break;
        case error.POSITION_UNAVAILABLE:
          console.error("위치 정보를 사용할 수 없습니다.");
          break;
        case error.TIMEOUT:
          console.error("요청 시간이 초과되었습니다.");
          break;
      }
    };
    
    // 실제 API 호출 (브라우저 환경에서 주석 해제)
    // navigator.geolocation.getCurrentPosition(mockSuccess, mockError, {
    //   enableHighAccuracy: true, // 정확도 우선
    //   timeout: 5000,            // 응답 대기 시간
    //   maximumAge: 0             // 캐시된 위치 정보 사용 안함
    // });
    
    mockSuccess({ coords: { latitude: 37.5665, longitude: 126.9780 } }); // 서울 좌표 모의
  } else {
    console.error("이 브라우저에서는 Geolocation이 지원되지 않습니다.");
  }
}

getLocation();
Geolocation API | Minstudio