HTML DOM 지리적 위치 속성

<시간/>

HTML DOM Geolocation 좌표 속성은 사용자의 장치 위치와 지구 고도를 가져오는 데 사용됩니다. 사용자는 이 속성이 작동하기 전에 좌표 제공을 승인해야 합니다. 이는 사용자의 개인 정보가 손상되지 않도록 하기 위한 것입니다. 다양한 기기의 위치를 추적하는 데 사용할 수 있습니다.

속성

다음은 위치 속성입니다 -

참고 − 아래 속성은 읽기 전용입니다. −

속성	설명
위치 좌표	지구에서 장치의 위도, 경도, 고도 및 속도와 같은 정보가 있는 좌표 개체를 반환합니다. 또한 측정값이 미터 단위로 얼마나 정확한지를 설명하는 정확도 값이 있습니다.
position.timestamp	위치 개체가 생성된 시간과 날짜를 나타냅니다. 해당 시간을 나타내는 DOMTimeStamp를 반환합니다.

구문

다음은 Geolocation 위치 속성의 구문입니다 -

position.property

여기에서 속성은 위 표의 두 속성 중 하나일 수 있습니다.

예시

Geolocation 위치 속성의 예를 살펴보겠습니다 -

<!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>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 지리적 위치 속성

좌표 버튼을 클릭하면 -

HTML DOM 지리적 위치 속성

위의 예에서 -

사용자가 클릭할 때 getCoords() 메서드를 실행할 COORDIATES 버튼을 먼저 만들었습니다.

<button onclick="getCoords()">COORDINATES</button>

getCoords() 함수는 브라우저가 지리적 위치를 지원하는지 여부를 확인하기 위해 네비게이터 객체의 지리적 위치 속성을 가져옵니다. 브라우저가 지리적 위치를 지원하는 경우 지리적 위치 개체를 반환합니다. 내비게이터 위치 정보 속성의 getCurrentPosition() 메서드를 사용하여 장치의 현재 위치를 얻습니다. getCurrentPosition() 메소드는 콜백 함수이며 모든 함수가 JavaScript의 객체이기 때문에 매개변수에 대한 객체로 함수를 취합니다.

여기에서 showCoords() 메서드를 전달했습니다. showCoords() 메서드는 위치 인터페이스를 매개변수로 사용하여 ID가 "Sample"인 단락 내에서 경도, 위도 및 정확도를 표시하는 데 사용합니다. 단락 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;
}