GeolocationCoordinates: longitude 속성

longitude의 값은 Coordinates 객체가 나타내는 지구상 위치의 경도를 십진수 도(°, DD)로 나타낸 숫자입니다. 이 값은 World Geodetic System 1984 명세 (WGS 84)가 정의합니다.

다음의 간단한 예제에서는 사용자의 위치를 가져와서 그 좌표를 출력합니다.

아래 JavaScript 코드는 사용자가 버튼을 클릭하면 위치 정보를 가져와서 출력하는 이벤트 수신기를 생성합니다.

let button = document.getElementById("get-location");
let latText = document.getElementById("latitude");
let longText = document.getElementById("longitude");

button.addEventListener("click", () => {
  navigator.geolocation.getCurrentPosition((position) => {
    let lat = position.coords.latitude;
    let long = position.coords.longitude;

    latText.innerText = lat.toFixed(2);
    longText.innerText = long.toFixed(2);
  });
});

버튼과 위도/경도를 각각 표시할 두 요소에 대한 참조를 쉽게 하기 위해 변수를 설정한 후, <button>의 addEventListener()를 호출해서 이벤트 수신기는 부착하는 모습입니다. 사용자가 이 버튼을 클릭하면 위치 정보를 가져오고 출력할 것입니다.

click 이벤트를 수신하면, 우리 코드는 getCurrentPosition()을 호출해 장치의 현재 위치를 요청합니다. 이 요청은 비동기 작업이므로 요청 완료 시 호출될 콜백을 제공하고, 이 콜백은 알아낸 위치를 나타내는 GeolocationPosition 객체를 입력받습니다.

이 GeolocationPosition 객체에서 사용자의 위도와 경도를 각각 position.coords.latitude와 position.coords.longitude로 가져옵니다. 두 값을 소숫점 아래 두 자리까지의 값으로 변환한 후, <span> 요소들이 두 값을 각각 표시하도록 갱신합니다.

결과를 출력하기 위한 HTML은 다음과 같습니다.

<p>
  당신의 위치는 위도 <span id="latitude">0.00</span>°, 경도
  <span id="longitude">0.00</span>° 입니다.
</p>
<button id="get-location">내 위치 찾기</button>

여기서 예제를 시험해 보세요.

• Geolocation API 사용하기
• 이 속성이 속한 GeolocationCoordinates
• Geolocation.getCurrentPosition()과 watchPosition()이 가져오는 위치정보를 나타내는 최상위 인터페이스, GeolocationPosition