Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML 지리적 위치

<시간/>

HTML Geolocation은 사용자가 허용하는 경우에만 사용자의 실시간 지리적 위치를 얻는 데 사용됩니다. 다양한 이유로 사용할 수 있습니다. JavaScript를 사용하여 위도와 경도를 가져옵니다.

참고 − Chrome 50 이전에는 지리적 위치 요청이 승인될 수 있었지만 Chrome 50에서는 HTTPS를 통한 요청만 승인되고 HTTP를 통한 요청은 무시되었습니다.

구문

다음은 구문입니다 -

navigator.geolocation.getCurrentPosition()

여기에서 getCurrentPosition()에 의해 반환된 객체 다음 속성을 가질 수 있습니다 -

속성
반환 값
coords.latitude
십진수로 표시된 지리적 위도
좌표.경도
십진수로 표시된 지리적 경도
coords.accuracy
위치의 정확도
좌표.고도
평균 해발 고도(미터)
coords.altitudeAccuracy
위치의 고도 정확도
coords.heading
북쪽에서 시계 방향으로 도 단위로 진행
coords.speed
초당 미터의 속도
임스탬프
응답 날짜/시간

HTML 지리적 위치가 오류 처리를 제공하는 방법의 예를 살펴보겠습니다 -

예시

<!DOCTYPE html>
<html>
<head>
<title>HTML Geolocation</title>
<style>
   * {
      padding: 2px;
      margin:5px;
   }
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-Geolocation</legend>
<input type="button" value="Update Location" onclick="updateLocation()">
<input type="button" value="Search" onclick="searchLoc()">
<div id="divDisplay">Current Location:</div>
<div>
<span id="latitude">Latitude: 42.9177901</span>
<span id="longitude">Longitude: -75.8114698</span>
</div>
<script>
   var latObj = document.getElementById("latitude");
   var longObj = document.getElementById("longitude");
   var divDisplay = document.getElementById("divDisplay");
   function searchLoc(){
      var lat = latObj.textContent.split(": ")[1];
      var long = longObj.textContent.split(": ")[1];
      var url = "https://www.google.com/maps/@"+lat+","+long+",8.58z";
      browseWindow = window.open(url, "browseWindow", "width=400, height=200");
   }
   function updateLocation(){
      browseWindow.close();
      var user = navigator.geolocation;
      if (user)
         user.getCurrentPosition(updatePosition, errorHandler);
      else
         divDisplay.textContent = "Geolocation is not supported in this browser";
   }
   function updatePosition(position) {
      divDisplay.innerHTML = 'Location Updated<br>Current Location:';
      latObj.textContent = 'Latitude: '+position.coords.latitude;
      longObj.textContent = 'Longitude: '+position.coords.longitude;
   }
   function errorHandler(error) {
      switch(error.code) {
         case error.PERMISSION_DENIED:
            divDisplay.textContent = "You denied the request to get Geolocation"
            break;
         case error.POSITION_UNAVAILABLE:
            divDisplay.textContent = "Your location information is unavailable"
            break;
         case error.TIMEOUT:
            divDisplay.textContent = "The request to get your location timed out"
            break;
         case error.UNKNOWN_ERROR:
            divDisplay.textContent = "Unknown error occurred"
            break;
      }
   }
</script>
</body>
</html>

1) 버튼을 클릭하기 전에 -

HTML 지리적 위치

2) '검색 클릭 후 ' 버튼 -

HTML 지리적 위치

3) '위치 업데이트 클릭 후 ' 버튼 -

HTML 지리적 위치

4) '검색 클릭 후 ' 버튼 -

HTML 지리적 위치

5) '위치 업데이트 클릭 후 ' 버튼 및 사용자가 위치 액세스 권한을 거부 -

HTML 지리적 위치