HTML DOM의 Geolocation coordinates(좌표) 속성은 사용자 기기의 지구상 위치(위도·경도)와 고도 정보를 가져오는 데 사용됩니다. 이 속성이 동작하려면 반드시 사용자가 좌표 제공에 먼저 동의해야 하며, 이는 사용자의 프라이버시와 개인정보를 보호하기 위한 조치입니다. 이 기능을 활용하면 다양한 기기의 위치를 추적할 수 있습니다.
좌표 속성의 종류
coordinates 객체에서 사용할 수 있는 속성은 다음과 같습니다.
참고: 아래 모든 속성은 읽기 전용(read-only)이며, 반환 타입은 double입니다.
| 번호 | 속성 및 설명 |
|---|---|
| 1 | coordinates.latitude 기기 위치의 위도를 십진수 도(degree) 단위로 반환합니다. |
| 2 | coordinates.longitude 기기 위치의 경도를 십진수 도 단위로 반환합니다. |
| 3 | coordinates.altitude 해수면을 기준으로 한 위치의 고도를 미터 단위로 반환합니다. 기기에 GPS가 없는 경우 null을 반환할 수 있습니다. |
| 4 | coordinates.accuracy 위도와 경도 값의 정확도를 미터 단위로 반환합니다. |
| 5 | coordinates.altitudeAccuracy 고도 값의 정확도를 미터 단위로 반환합니다. |
| 6 | coordinates.heading 기기가 이동 중인 방향을 반환합니다. 이 값은 도 단위로 표현되며, 진북(true north)을 기준으로 시계 방향으로 얼마나 벗어났는지를 나타냅니다. 0도는 진북을 의미하고, 동쪽은 90도, 서쪽은 270도입니다. 속도가 0이면 heading은 NaN이 되며, 기기가 방향 정보를 제공할 수 없는 경우 null을 반환합니다. |
| 7 | coordinates.speed 기기의 이동 속도를 초당 미터(m/s) 단위로 반환합니다. 이 값은 null일 수 있습니다. |
구문
Geolocation coordinates 속성의 기본 구문은 다음과 같습니다.
coordinates.property
여기서 "property" 자리에는 위 표에서 설명한 속성 중 하나를 넣으면 됩니다.
예제
Geolocation coordinates 속성의 실제 사용 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Geolocation coordinates property</h1>
<p>Get you coordinates by clicking the below button</p>
<button onclick="getCoords()">COORDINATES</button>
<p id="Sample">Your coordinates are:</p>
<script>
var p = document.getElementById("Sample");
function getCoords() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showCoords);
} else {
p.innerHTML ="This browser doesn't support geolocation.";
}
}
function showCoords(position) {
p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy;
}
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
COORDINATES 버튼을 클릭한 후 "위치 정보 사용(Know your location)" 팝업에서 허용(Allow)을 누르면 다음과 같이 좌표가 표시됩니다.
예제 동작 원리
위 예제가 어떻게 동작하는지 단계별로 살펴보겠습니다.
먼저, 사용자가 클릭하면 getCoords() 함수를 실행하는 COORDINATES 버튼을 생성했습니다.
<button onclick="getCoords()">COORDINATES</button>
getCoords() 함수는 navigator 객체의 geolocation 속성을 통해 현재 브라우저가 지리적 위치(Geolocation) 기능을 지원하는지 확인합니다. 브라우저가 이를 지원하면 Geolocation 객체를 반환하며, getCurrentPosition() 메서드를 호출해 기기의 현재 위치를 가져옵니다. getCurrentPosition() 메서드는 콜백 방식으로 동작하며, JavaScript에서 모든 함수가 객체이기 때문에 매개변수로 함수를 전달받습니다.
여기서는 showCoords() 함수를 콜백으로 전달했습니다. showCoords() 함수는 position 인터페이스를 매개변수로 받아, id가 "Sample"인 문단(<p>) 안에 경도(longitude), 위도(latitude), 정확도(accuracy)를 표시합니다. 이때 문단의 innerHTML 속성을 사용해 텍스트를 추가합니다.
function getCoords() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showCoords);
} else {
p.innerHTML ="This browser doesn't support geolocation.";
}
}
function showCoords(position) {
p.innerHTML = "Longitude:" + position.coords.longitude + "<br>Latitude: " + position.coords.latitude+"<br>Accuracy: "+ position.coords.accuracy;
}