Geolocation API

Secure context
This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Geolocation API는 사용자가 원할 경우 웹 애플리케이션에 위치 정보를 제공할 수 있는 API입니다. 개인정보 보호를 위해, 브라우저는 위치 정보를 제공하기 전에 사용자에게 위치 정보 권한에 대한 확인을 받습니다.

Geolocation 객체를 사용하려는 WebExtension은 매니페스트에 "geolocation" 권한을 추가해야 합니다. 사용자의 운영 체제는 WebExtension이 처음으로 위치 정보를 요청하는 순간 사용자에게 정보 제공 여부를 물어봅니다.

개념과 사용법

사용자의 현재 위치를 지도에 표시하거나, 위치 기반 개인화 정보를 제공하는 등, 종종 웹 앱에서 위치 정보를 가져와야 하는 상황이 있습니다.

Geolocation API는 navigator.geolocation을 통해 접근합니다. 이 때, 사용자의 브라우저는 위치 정보 접근 권한을 요청하게 되고, 사용자가 허가할 경우 현재 장치에서 사용 가능한 최선의 방법(GPS, WiFi, ...)을 통해 위치를 알아냅니다.

위의 과정이 끝난 후, 코드에서는 몇 가지 다른 방법으로 위치 정보를 가져올 수 있습니다.

두 메서드 모두 최대 세 개의 매개변수를 받습니다.

  • 필수로 지정하는 성공 콜백: 위치 정보를 성공적으로 가져온 경우, 위치 데이터를 담은 GeolocationPosition 객체를 유일한 매개변수로 하여 콜백을 호출합니다.
  • 선택적으로 지정하는 실패 콜백: 위치 정보를 가져오지 못한 경우, 실패 원인을 담은 GeolocationPositionError 객체를 유일한 매개변수로 하여 콜백을 호출합니다.
  • 선택적으로 지정하는 PositionOptions 객체는 위치 정보 회수에 적용할 옵션을 제공합니다.

Geolocation 사용법에 대한 추가 정보는 Geolocation API 사용하기 문서를 참고하세요.

인터페이스

Geolocation
Geolocation API의 주요 클래스로, 사용자의 현재 위치를 가져오고, 위치 변경을 감지하고, 이전에 등록했던 감지기를 제거하는 메서드를 담고 있습니다.
GeolocationPosition
사용자의 위치를 나타냅니다. GeolocationPosition 인스턴스는 Geolocation 객체 메서드의 성공 콜백에 제공되며, 타임스탬프와 함께 GeolocationCoordinates 객체 인스턴스를 포함합니다.
GeolocationCoordinates
사용자 위치의 좌표를 나타냅니다. GeolocationCoordinates 인스턴스는 위도, 경도 외에도 기타 중요한 관련 정보를 포함합니다.
GeolocationPositionError
GeolocationPositionErrorGeolocation 객체 메서드의 오류 콜백에 제공되며, 오류 코드와 오류 메시지를 담고 있습니다.
Navigator.geolocation
API로 접근할 수 있는 지점입니다. Geolocation 객체 인스턴스를 반환합니다.

연관 배열

PositionOptions
Geolocation.getCurrentPosition()Geolocation.watchPosition()에 매개변수로 전달할 옵션을 나타내는 객체입니다.

예제

In the following example the Geolocation API is used to retrieve the user's latitude and longitude. If sucessful, the available hyperlink is populated with an openstreetmap.org URL that will show their location.

HTML

<button id = "find-me">Show my location</button><br/>
<p id = "status"></p>
<a id = "map-link" target="_blank"></a>

JavaScript

function geoFindMe() {

  const status = document.querySelector('#status');
  const mapLink = document.querySelector('#map-link');

  mapLink.href = '';
  mapLink.textContent = '';

  function success(position) {
    const latitude  = position.coords.latitude;
    const longitude = position.coords.longitude;

    status.textContent = '';
    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
  }

  function error() {
    status.textContent = 'Unable to retrieve your location';
  }

  if(!navigator.geolocation) {
    status.textContent = 'Geolocation is not supported by your browser';
  } else {
    status.textContent = 'Locating…';
    navigator.geolocation.getCurrentPosition(success, error);
  }

}

document.querySelector('#find-me').addEventListener('click', geoFindMe);

Result

명세

Specification Status Comment
Geolocation API Recommendation

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
GeolocationChrome Full support 5Edge Full support 12Firefox Full support 3.5
Notes
Full support 3.5
Notes
Notes GPSD (GPS daemon) support added in Firefox 3.6. WiFi-based location is provided by Google (privacy) or a custom provider (MLS instructions).
IE Full support 9Opera Full support 10.6Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android Full support 1.0
clearWatchChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 10.6Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android Full support 1.0
getCurrentPositionChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 10.6Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android Full support 1.0
Secure context requiredChrome Full support 50Edge Full support ≤79Firefox Full support 55IE No support NoOpera Full support 37Safari Full support YesWebView Android Full support 51
Notes
Full support 51
Notes
Notes Secure context is only required for applications targeting Android Nougat (7) and higher. See bug 603574.
Chrome Android Full support 50Firefox Android Full support 55Opera Android Full support 37Safari iOS Full support YesSamsung Internet Android Full support 5.0
watchPositionChrome Full support 5Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 10.6Safari Full support 5WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 5Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

가용성

WiFi 기반의 위치 정보는 보통 Google이 제공하므로, 기본 Geolocation API는 중국에서 사용하지 못할 수도 있습니다. 대신 Baidu, Autonavi, Tencent 등 지역 서드파티 제공자가 지원하는 라이브러리를 사용할 수 있습니다. 위 서비스는 WiFi 대신 IP 주소와 지역 앱을 사용해 위치 정보를 개선합니다.

같이 보기