HTML DOM의 Geolocation 좌표(coords) 속성은 사용자 기기의 지구상 위치(위도·경도)와 고도를 가져오는 데 사용됩니다. 이 속성이 동작하려면 반드시 사용자가 위치 정보 제공에 동의해야 하며, 이는 사용자의 개인정보와 프라이버시를 보호하기 위한 조치입니다. 이 기능은 다양한 기기의 위치를 추적하는 용도로도 활용할 수 있습니다.
주요 속성
position 객체가 제공하는 속성은 다음과 같습니다.
참고 – 아래 속성들은 모두 읽기 전용(read-only)입니다.
| 속성 | 설명 |
|---|---|
| position.coords | 위도(latitude), 경도(longitude), 고도(altitude), 속도(speed) 등 기기의 지구상 위치 정보를 담고 있는 좌표 객체를 반환합니다. 또한 측정값이 얼마나 정확한지 미터 단위로 나타내는 accuracy 값도 함께 포함합니다. |
| position.timestamp | position 객체가 생성된 시각과 날짜를 나타내며, 해당 시간을 표현하는 DOMTimeStamp 값을 반환합니다. |
문법(Syntax)
Geolocation position 속성의 기본 문법은 다음과 같습니다.
position.property
여기서 property는 위 표에 소개된 두 속성 중 하나를 의미합니다.
예제
Geolocation position 속성을 활용한 실제 예제를 살펴보겠습니다.
<!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 버튼을 클릭하면 아래와 같이 위치 정보가 표시됩니다.
코드 상세 설명
위 예제의 동작 방식을 단계별로 살펴보겠습니다.
먼저, 사용자가 클릭하면 getCoords() 메서드를 실행하는 COORDINATES 버튼을 생성했습니다.
<button onclick="getCoords()">COORDINATES</button>
getCoords() 함수는 navigator 객체의 geolocation 속성을 확인하여 브라우저가 지리적 위치(Geolocation) 기능을 지원하는지 검사합니다. 브라우저가 이를 지원하면 Geolocation 객체를 반환하며, getCurrentPosition() 메서드를 호출해 기기의 현재 위치를 가져옵니다. getCurrentPosition() 메서드는 콜백 함수 방식으로 동작하며, JavaScript에서 모든 함수가 객체이기 때문에 매개변수로 함수를 전달받습니다.
여기서는 showCoords() 메서드를 콜백으로 전달했습니다. showCoords() 메서드는 position 인터페이스를 매개변수로 받아, id가 "Sample"인 단락(paragraph) 안에 경도, 위도, 정확도(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;
}