본문 바로가기
프로그래밍/HTML5

[꿀강] HTML5 Geolocation

by 착살의 숲 2018. 9. 13.
반응형

Geolocation은 사용자의 현재 위치를 표시하는 역할을 한다.

물론 사용자의 현재 위치를 표시하기 위해선 먼저 사용자의 동의가 필요하다.

또한  인터넷이 연결 되어 있어야만 현재 위치값을 가져올 수 있다.

 

 

 

아래 소스를 참고하시기 바란다.

 

 

<!DOCTYPE html>
<html>
<head>
  <title>비부스 꿀강</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  <h1>비부스 꿀강</h1>
    <p>
      현재 위치 (위도, 경도):<br/>
      <span id="currentLat"></span>&deg;, <span id="currentLon"></span>&deg;
    </p>
<script>
window.onload = function() {

      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
          document.getElementById("currentLat").innerHTML = position.coords.latitude;
          document.getElementById("currentLon").innerHTML = position.coords.longitude;
          }, function(error) {
          alert("Error occurred. Error code: "+error.code);

        });

      }
    };
</script>
</body>
</html>

 

 

 

 

위도와 경도를 표시해 줄 수 있고 지도 화면에 현재 위치를 표시해 줄 수 있다.

특히 모바일에서 주로 사용되어 질거라고 보여진다.

 

 

반응형

댓글