[JS] IP를 이용한 Geolocation 정보 얻기 (위도, 경도)

IP 주소를 이용하여, Geolocation 정보를 얻을 수 있다. 여기서 Geolocation은 위도와 경도 (Latitude, Longitude)를 뜻한다. 여기서 얻어지는 위도와 경도값은 굉장히 부정확하다. 그 이유는 ISP(인터넷 공급자)가 제공한 데이터를 이용하기 때문이다. 따라서 현재 위치는 서울이지만 조회 결과가 경기도로 나타날 수도 있다. 이

1. IP 주소 얻기

 현재 자신의 위치 정보를 얻는 방법은 [JS] HTML에서 JS를 이용하여 IP 주소 얻기를 참조하자.

2. Geolocation API 설명

 여기서 사용할 API는 ip-api.com가 제공한다. 이 사이트는 별도의 회원가입이나, 키발급 없이 바로 조회를 할 수 있다. 다만 분당 150회의 제한이 있으니 확인하기 바란다. 또한 영리의 목적으로 사용할 수 없다.

 우리가 위치 정보를 얻기 위해서 전달해야하는 정보는

http://ip-api.com/json/123.123.123.123?callback=yourfunction

 ip는 당연히 전달되어야 하고, callback은 선택사항인데, ip-api의 서버가 response할 때, client 스크립트 내의 함수를 호출해준다.

 즉, 조회후 데이터를 출력하는 함수가 printDataOnThePage()라면, printDataOnThePage를 입력하면 된다.

3. IP를 이용하여, Geolocation 정보 얻기

 IP를 이용하여, Geolocation을 얻기위해서는 동기(synchronous)방식으로 전달해도 되지만, 대부분 비동기(asynchronous)를 이용할 것이다.

전체적인 과정을 나타내면,

 (1) IP 주소를 얻는다.

 (2) AJAX를 통하여, ip-api 서버에 비동기 통신으로 Geolocation을 요청한다.

 (3) 결과를 제공받아 화면에 출력한다.

아래의 예제를 보자.

[코드]

<div style="padding-left: 60px;">
  ip : <input id="your-ip-addr" type="text" />
  Geo : <input id="your-geo" type="text" />
  <script type="text/javascript">
    function loadScript(url, callback){
      var script = document.createElement("script")
      script.type = "text/javascript";

      if (script.readyState){  //IE
        script.onreadystatechange = function(){
          if (script.readyState == "loaded" ||
                script.readyState == "complete"){
               script.onreadystatechange = null;  
               callback();
          }
        };
      }else {  //Others
         script.onload = function(){
            callback();
         };
      }
      script.src = url;
      document.getElementsByTagName("head")[0].appendChild(script);
    }
    loadScript("https://jsonip.com/?callback=ip", function(){
      var geoData, ipData = ip;
      document.getElementById("your-ip-addr").value=ipData;
      document.getElementById("your-geo").value="Wait..";
    
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          geoData = JSON.parse(this.responseText);
          printDataOnThePage();
        }
       };
      xhttp.open("GET", 
                 "http://ip-api.com/json/"+ipData,
                 true);
      xhttp.send();
      function printDataOnThePage(){
        document.getElementById("your-geo").value=
          geoData.lat+' '+geoData.lon+' '+geoData.city;
      }    
    });

  </script>
</div>

AJAX를 잘 모른다면, W3School AJAX를 먼저 보자. 우선 ip주소 스크립트를 로딩하기 전에 실행될 수 있으므로, 스크립트를 로딩후에 함수를 동작하게 하는 "loadScript"부분을 추가하였다. 이부분이 잘 이해가 되지않는다면, 전체를 긁어다가 쓰면된다.  그건 각자가 알아서 해결하면될 문제이고, 간단히 ip를 받아서 Ajax를 통해 ip-api서버로 요청을 보내고 그 결과를 input 태그에 담는다.

모르겠다면 댓글로