[API] 주소 검색 - 행정안전부 API 사용하기[API] 주소 검색 - 행정안전부 API 사용하기

Posted at 2019. 11. 20. 10:34 | Posted in API/우편번호
반응형




참고 : https://www.juso.go.kr/addrlink/devAddrLinkRequestGuide.do?menu=roadApi





■ 주소 검색 API(한국지역정보개발원) 발급받기

 



API를 발급받기 위해서는 https://www.juso.go.kr/addrlink/devAddrLinkRequestWrite.do?returnFn=write&cntcMenu=URL 페이지에 접속한다.






오픈 API 신청 페이지에 접속하면


위와같이 사용할 항목을 선택하고.


신청하기 버튼을 클릭한다.







API를 사용하기 위해서는 본인인증 과정이 필요하다.

(개발용 7일 - 본인 미인증도 가능)







본인 인증 절차가 마무리 되면 위와 같이 API 키가 생성된 것을 확인 할 수 있다.












■ 주소 검색 API(JavaScript, jQuery) - 샘플코드




한국지역정보개발원에서 제공하는 도로명주소 API는 JSON 형태로 데이터를 제공해 준다.


제공하는 예제소스에서는 PHP, JSP, ASP등의 샘플과 팝업창에 띄워서 사용할 수 있는 방법을 제공하지만.


필요한 JSON으로 데이터를 받을 수 있도록,


JavaScript와, jQuery Ajax를 통해 구현 할 수 있게끔 변경을 해 보았다.



# 소스코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>:: JUSO GO API ::</title>

<style type="text/css">

table { width:100%;border:1px solid #444444;border-collapse:collapse; }

th, td { border: 1px solid #444444; }

tr > td:first-child { text-align:center; }

div#wrap { display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px;padding:5px; }

div#wrap > div { margin-top:10px;margin-left::5px;margin-right:5px;margin-bottom::5px; }

div#wrap a:link { color:#000000;text-decoration:none; }

div#wrap a:hover { color:#0000FF;text-decoration:underline; }

div#totoalOutcome { display:none; }

#closeBtn { float:right;margin-top:-5px;margin-right:-5px; }

#searchAddr { width:380px; }

#zipCode { text-align:center; }

#address, #detail { width:500px; }

</style>

<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script language="javascript">


/// @brief 주소검색창 - 키보드 Enter키 입력

function enterSearch() {

var evt_code = (window.netscape) ? event.which : event.keyCode;

if (evt_code == 13) {

event.keyCode = 0;

getAddr();

}

}


/// @brief 주소검색창 - 데이터 조회

function getAddr() {


// 적용예 (api 호출 전에 검색어 체크)

let keyword = document.getElementById("searchAddr");

if(!checkSearchedWord(keyword)) {

return;

}


jQuery.ajax({

  url : "http://www.juso.go.kr/addrlink/addrLinkApiJsonp.do"

, type : "POST"

, data : {

  confmKey : "발급받은 도로명 주소 API KEY"

, currentPage : document.getElementById("currentPage").value

, countPerPage : document.getElementById("countPerPage").value

, keyword : keyword.value

, resultType : "json"

}

, dataType : "jsonp"

, crossDomain : true

, success : function(jsonStr) {


jQuery("#list").html("");

let errCode = jsonStr.results.common.errorCode;

let errDesc = jsonStr.results.common.errorMessage;


if(errCode == "0") {

if(jsonStr != null) {

makeListJson(jsonStr);

}

} else {

alert(errDesc);

}

}

, error : function(xhr, status, error) {

alert("에러발생");

}

});

}


/// @brief 주소검색창 - 주소지 선택

function makeListJson(jsonStr) {


let htmlStr = "<thead><tr><th style='width:70px;'>우편번호</th><th>주소</th></tr></thead><tbody>";


if(jsonStr.results.common.totalCount > 0) {


jQuery("#totoalOutcome").css("display", "block");

jQuery("#totalCnt").html(jsonStr.results.common.totalCount);


jQuery(jsonStr.results.juso).each(function() {


let zipNo = this.zipNo;                  // 우편번호

let roadAddr = this.roadAddr;        // 도로명 주소

let jibunAddr = this.jibunAddr;       // 지번 주소


htmlStr += "<tr>";

htmlStr += "<td>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+roadAddr+"\");'>";

htmlStr += zipNo;

htmlStr += "</a>";

htmlStr += "</td>";

htmlStr += "<td>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+roadAddr+"\");'>";

htmlStr += "도로명 : " + roadAddr;

htmlStr += "</a>";

htmlStr += "<br/>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+jibunAddr+"\");'>";

htmlStr += "지번 : " + jibunAddr;

htmlStr += "</a>";

htmlStr += "</td>";

htmlStr += "</tr>";

});


pageMake(jsonStr);


} else {

htmlStr += "<tr><td colspan='2'>조회된 데이터가 않습니다.<br/>다시 검색하여 주시기 바랍니다.</td></tr>";

}


htmlStr += "</tbody>";

jQuery("#list").html(htmlStr);

}


/// @brief 주소검색창 - 주소지 삽입

function inputTextAddress(zipcode, address) {

document.getElementById("zipCode").value = zipCode;

document.getElementById("address").value = address;

}


/// @brief 주소검색창 - 열기

function addressWindowOpen() {

jQuery("#wrap").slideDown();

jQuery("#searchAddr").focus();

}


/// @brief 주소검색창 - 닫기

function addressWindowClose() {

jQuery("#wrap").slideUp();

jQuery("#searchAddr").val("");

jQuery("#totoalOutcome").css("display", "none");

jQuery("#list").empty();

jQuery("#pagingList").empty();

jQuery("#currentPage").val("1");

}


/// @brief 주소검색창 - 특수문자 제거

function checkSearchedWord(obj) {


if(obj.value.length > 0) {


// 특수문자 제거

var expText = /[%=><]/;


if(expText.test(obj.value) == true) {

alert("특수문자를 입력 할수 없습니다.") ;

obj.value = obj.value.split(expText).join("");

return false;

}


// 특정문자열(sql예약어의 앞뒤공백포함) 제거

var sqlArray = new Array(

  "OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE"

  , "DROP", "EXEC", "UNION",  "FETCH", "DECLARE", "TRUNCATE"

);

// sql 예약어


var regex = "";

for(var num = 0; num < sqlArray.length; num++) {


regex = new RegExp(sqlArray[num], "gi") ;


if(regex.test(obj.value)) {

alert("\"" + sqlArray[num]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");

obj.value = obj.value.replace(regex, "");

return false;

}

}

}

return true ;

}


/// @brief 주소검색창 - 페이징 생성

function pageMake(jsonStr) {


var total = jsonStr.results.common.totalCount; // 총건수

var pageNum = document.getElementById("currentPage").value; // 현재페이지

                var pageBlock = Number(document.getElementById("countPerPage").value); // 페이지당 출력 개수

var paggingStr = "";


// 검색 갯수가 페이지당 출력갯수보다 작으면 페이징을 나타내지 않는다.

if(total > pageBlock) {


var totalPages = Math.floor((total - 1) / pageNum) + 1;

var firstPage = Math.floor((pageNum - 1) / pageBlock) * pageBlock + 1;


if(firstPage <= 0) { firstPage = 1; };


var lastPage = (firstPage - 1) + pageBlock;


if(lastPage > totalPages) { lastPage = totalPages; };

var nextPage = lastPage + 1;

var prePage = firstPage - pageBlock;


if(firstPage > pageBlock) {

paggingStr += "<a href='javascript:;' onClick='goPage(" + prePage + ");'>◀</a>";

paggingStr += "&nbsp;";

}


for(let num = firstPage; lastPage >= num; num++) {

if(pageNum == num) {

paggingStr += "<a style='font-weight:bold;color:#0000FF;' href='javascript:;'>" + num + "</a>";

paggingStr += "&nbsp;";

} else {

paggingStr += "<a href='javascript:;' onClick='goPage(" + num + ");'>" + num + "</a>";

paggingStr += "&nbsp;";

}

}


if(lastPage < totalPages) {

paggingStr += "<a href='javascript:;' onClick='goPage(" + nextPage + ");'>▶</a>";

}

}


                jQuery("#pagingList").html(paggingStr);

}


/// @brief 페이징 이동

function goPage(pageNum) {

document.getElementById("currentPage").value = pageNum;

getAddr();

}

</script>

</head>

<body>

<h1>■ 행정안정부 - 주소 검색 API</h1>

<hr/>

현재 페이지 : <input type="number" id="currentPage" value="1" style="text-align:center;"/>

<div style="height:5px;"></div>

페이지당 출력 개수 : <input type="number" id="countPerPage" value="5" style="text-align:center;"/>

<hr/><br/>

<input type="text" id="zipCode" value="" onClick="addressWindowOpen();" placeholder="00000" readonly/>

<input type="button" onClick="addressWindowOpen();" value="우편번호 찾기"/>

<div id="wrap">

<img id="closeBtn" src="./close_box_red.png" onClick="addressWindowClose();"/>

<div>

<input type="text" id="searchAddr" value="" onkeydown="enterSearch();" placeholder="도로명주소, 건물명 또는 지번 입력"/>

<input type="button" onClick="getAddr();" value="주소검색"/>

</div>

<div>

<div id="totoalOutcome">

검색결과 : <span id="totalCnt">0</span>

</div>

<table id="list"></table>

</div>

<div id="pagingList" style='text-align:center;'></div>

</div>

<div style="height:5px;"></div>

<input type="text" id="address" value="" placeholder="도로명 주소, 지번 주소" readonly/>

<div style="height:5px;"></div>

<input type="text" id="detail" value="" placeholder="상세 주소지 입력"/>

</body>

</html>




# 출력결과





반응형
저작자표시

'API > 우편번호' 카테고리의 다른 글

[API] 다음 - 우편번호 API 모바일에서 사용하기  (4) 2018.04.04
[API] 다음 - 우편번호 API 사용하기  (0) 2018.03.13
//

티스토리툴바