HTML DOM 지리 위치 좌표 속성

<시간/>

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

속성

다음은 좌표 속성입니다 -

참고 − 이 모든 속성은 읽기 전용이며 반환 유형은 이중입니다.

Sr.No	속성 및 설명
1	좌표.위도 장치 위치의 위도를 십진수로 반환합니다.
2	좌표.경도 장치 위치의 경도를 십진수로 반환하려면
3	좌표.고도 해수면을 기준으로 위치의 고도를 미터 단위로 반환합니다. 기기에 GPS가 없으면 null을 반환할 수 있습니다.
4	좌표.정확도 위도 및 경도 속성의 정확도를 미터로 반환하려면
5	좌표.altitudeAccuracy 고도 속성의 정확도를 미터 단위로 반환하려면
6	좌표.제목 장치가 이동하는 방향을 반환합니다. 도 단위로 지정된 이 값은 장치가 진북 방향에서 얼마나 멀리 떨어져 있는지 나타냅니다. 0도는 진북을 나타내며 방향은 시계 방향으로 결정됩니다(동쪽은 90도, 서쪽은 270도). 속도가 0이면 헤딩은 NaN입니다. 장치가 표제 정보를 제공할 수 없는 경우 이 값은 null입니다.
7	좌표.속도 초당 미터 단위로 장치의 속도를 반환합니다. 이 값은 null일 수 있습니다.

구문

다음은 GeoLocation 좌표 속성의 구문입니다 -

coordinates.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() 함수는 브라우저가 지리적 위치를 지원하는지 여부를 확인하기 위해 네비게이터 객체의 지리적 위치 속성을 가져옵니다. 브라우저가 지리적 위치를 지원하는 경우 지리적 위치 개체를 반환합니다. navigator geolocation 속성의 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;
}