현재 위치 가져오기

이 항목에서는 geolocation 개체의 getCurrentPosition 메서드를 사용하여 현재 위치를 알고 웹 페이지에 표시하는 방법을 보여주는 샘플을 제공합니다.getCurrentPosition 메서드는 위치 정보에 대한 비동기 요청을 시작하고 즉시 반환됩니다. 요청이 성공적으로 완료되면 위치 데이터를 받기 위해 구현한 성공 콜백이 호출됩니다.

다음 예제에서는 getCurrentPosition을 호출하고 콜백을 사용하여 들어오는 위치 데이터를 처리하는 방법을 보여 줍니다. 다음 예제에서는 사용자가 예제의 Get Latitude and Longitude 단추를 클릭할 경우 예제의 requestPosition 함수가 호출됩니다. 이 함수는 getCurrentPosition을 호출하기 전에 geolocation 개체를 사용할 수 있는지 확인합니다. 위치를 가져오고 나면 호출 함수가 위도 및 경도 좌표를 사용하여 페이지의 텍스트 상자를 업데이트합니다.


<!DOCTYPE html>  
<html>
<head>
<title>Geolocation API Example</title>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript">

function setText(val, e) {
    document.getElementById(e).value = val;
}

function insertText(val, e) {
    document.getElementById(e).value += val;
}

var nav = null; 

function requestPosition() {
  if (nav == null) {
      nav = window.navigator;
  }
  if (nav != null) {
      var geoloc = nav.geolocation;
      if (geoloc != null) {
          geoloc.getCurrentPosition(successCallback);
      }
      else {
          alert("geolocation not supported");
      }
  }
  else {
      alert("Navigator not found");
  }
}



function successCallback(position)
{
   setText(position.coords.latitude, "latitude");
   setText(position.coords.longitude, "longitude");
}



</script>
</head>
<body>
<label for="latitude">Latitude: </label><input id="latitude" /> <br />
<label for="longitude">Longitude: </label><input id="longitude" /> <br />
<input type="button" onclick="requestPosition()" value="Get Latitude and Longitude"  /> 

</body>
</html>


중요  

성공 콜백은 비동기적으로 호출되므로 얼마나 빨리 호출될 수 있는지 예측할 수 없습니다. 액세스하려는 페이지 요소가 로드되기 전에 콜백이 호출되면 웹 페이지가 예상대로 작동하지 않습니다. 이 문제를 방지하는 한 가지 방법은 페이지 로드가 완료된 후 호출되는 함수 내에서 getCurrentPosition을 호출하는 것입니다.

관련 항목

오류 처리
위치 인식 웹 페이지를 만드는 방법
시간 제한 기간 지정
위치 변경 감시

 

 

표시:
© 2014 Microsoft