Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Crispfeel

네이버 지도 API - 주소 좌표변환 본문

Javascript

네이버 지도 API - 주소 좌표변환

Crispfeel 2019. 7. 4. 12:18

네이버 지도 API를 활용한 주소의 좌표값을 구하는 소스입니다.
네이버 API이기 때문에 국내(대한민국) 전용입니다^^
실제 제가 만들었던 모든 소스를 올립니다. (css는 삭제해도 무방합니다.)

 

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>한국주소 좌표변환 - korea address to geocode</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <style type="text/css">
      body, html, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd {padding:0;margin:0;font-size:.95em;}
      img {border:0;}
      a {text-decoration:none;}
      table {border-spacing:0;padding:0;border-top:1px solid #ddd;border-left:1px solid #ddd;width:100%;}
      td, th {border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:3px;}
      th {background-color:#f5f5f5;text-align:left;}
      #inputAddr th {background-color:#f5e7ed}
      input[type=text] {height:20px;line-height:20px;}
      input[type=button] {border:1px solid #222;background-color:#444;color:#fff;line-height:22px;}
      #inputAddr, #result {width:100%;margin:0 auto;}
      #result {max-height:250px;overflow-y:auto;border-bottom:1px solid #ddd;}
    </style>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=[네이버지도clientId]&submodules=geocoder"></script>
    <script>
      function searchAddressToCoordinate(address) {
        naver.maps.Service.geocode({
          address: address
        }, function(status, response) {
          if (status === naver.maps.Service.Status.ERROR) {
            return alert('주소를 확인후 다시 시도 바랍니다.');
          }
          $("#resultNum").text(response.result.items.length+"개");
          for(i=0;i<response.result.items.length;i++){
            var item=response.result.items[i];
            addrType = item.isRoadAddress ? '[도로명 주소]' : '[지번 주소]';
            str = "<tr><th rowspan=2>"+(i+1)+"</th><th>변환주소</th><td>"+addrType+item.address+"</td></tr><tr><th>좌표</th><td>lat-"+item.point.y+", lng-"+item.point.x+"</td></tr>";
            $("#result table tbody").append(str);
          }     
        });
      }
      function sendAddr(){
        if(!$('#address').val()){
          alert("변환할 주소를 입력해주세요.");
          $("#address").focus();
        }else{
          $("#result table tbody, #resultNum").html("");
          searchAddressToCoordinate($('#address').val());
        }
      }
      $(function(){
        $("#address").focus();
      });
    </script>
  </head>
  <body>
    <div id="inputAddr">
      <table>
        <colgroup>
          <col width="110" />
          <col width="*" />
        </colgroup>
        <tbody>
          <tr>
            <th>변환할 주소</th>
            <td>
              <input type="text" id="address" placeholder="예)송파대로 100" value="" onkeyup="if(window.event.keyCode == 13){sendAddr();}">
              <input type="button" id="submit" value="변환" onClick="sendAddr()">
            </td>
          </tr>
          <tr>
            <th>검색수</th>
            <td id="resultNum"></td>
          </tr>
        </tbody>
      </table>
    </div>
    <div id="result">
      <table>
      <colgroup>
          <col width="30" />
          <col width="80" />
          <col width="*" />
        </colgroup>
        <tbody>
        </tbody>    
      </table>
    </div>
  </body>
</html>

제가 일하면서 필요한데 그동안 서핑해서 썼던 기능들을 하나 둘씩 직접 만들어서 모아둘 예정입니다.

저작자표시 비영리 동일조건

'Javascript' 카테고리의 다른 글

서로다른 도메인의 Iframe 경우 처리 - cross domain iframe  (0) 2019.07.04
경유(디젤)차량 환경개선부담금 계산  (0) 2019.07.04
'Javascript' Related Articles more