도로명주소 API - 팝업API 적용하기

IT/API 및 Tool

도로명주소 API - 팝업API 적용하기

보로로롬 2017. 10. 20. 18:00

도로명주소 API - 팝업형 주소 API 적용

주소 api를 사용하려면 아래 링크에서 샘플 및 정보를 받을수 있습니다.

https://www.juso.go.kr/addrlink/main.do

접속해서 api키를 발급받아야 사용이 가능하니 api키를 발급 받으시길 바랍니다.

기본적인 정보만 입력하면 쉽게 발급받으실수 있습니다.

sample과 api활용 가이드도 있으니 참고하시면 좋을것 같습니다.

저는 팝업형 주소검색을 사용했고 제가 적용한것을 작성하겠습니다.

JAVA - Controller

@RequestMapping("/jusoPopup")

public String jusoPopup(@ModelAttribute("paramVO") ParamVO paramVO) throws Exception {

return " 경로/jusoPopup";

}

아래 jusoPopup 경로에 맡게 리턴을 설정해주시고 리퀘스트 맵핑을 해줍니다.

조회할 페이지 - jsp

자바스크립트

function goPopup(){

// 주소검색을 수행할 팝업 페이지를 호출합니다.

// 호출된 페이지(jusopopup.jsp)에서 실제 주소검색URL(http://www.juso.go.kr/addrlink/addrLinkUrl.do)를 호출하게 됩니다.

var pop = window.open("/cnsgn/entpr/jusoPopup.do","pop","width=590,height=420, scrollbars=yes, resizable=yes");

// 모바일 웹인 경우, 호출된 페이지(jusopopup.jsp)에서 실제 주소검색URL(http://www.juso.go.kr/addrlink/addrMobileLinkUrl.do)를 호출하게 됩니다.

//var pop = window.open("/popup/jusoPopup.jsp","pop","scrollbars=yes, resizable=yes");

}

function jusoCallBack(roadFullAddr,roadAddrPart1,addrDetail,roadAddrPart2,engAddr, jibunAddr, zipNo, admCd, rnMgtSn, bdMgtSn,detBdNmList,bdNm,bdKdcd,siNm,sggNm,emdNm,liNm,rn,udrtYn,buldMnnm,buldSlno,mtYn,lnbrMnnm,lnbrSlno,emdNo){

// 팝업페이지에서 주소입력한 정보를 받아서, 현 페이지에 정보를 등록합니다.

document.form.roadAddrPart1.value = roadAddrPart1; // 도로명주소

document.form.addrDetail.value = addrDetail; // 상세주소

document.form.zipNo.value = zipNo; // 우편번호

self.close();

}

위와같이 작성후 html에 button을 만들어 goPopup() 스크립트를 호출해주면 됩니다.

josoCallBack에서 원하는 주소방식을 원하는 id값에 넣어주면됩니다.

또는 제이쿼리를 이용해서 $("#id").val(파라메터); 형식으로 넣어줄수도 있습니다.

파라메터 정보는 아래 사진 첨부하겠습니다.

설명으로 부족하다면 각 파라메터를 console.log()에 넣어서 직접 확인하는 방법이 있습니다.

주소검색후 상세주소를 입력하고 확인을 누르면 각 form에있는 id값에 데이터를 넣어주고 self.close();로 팝업을 닫아줍니다.

jusoPopup.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

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

<html>

<head>

<title>Insert title here</title>

//request.setCharacterEncoding("UTF-8"); //한글깨지면 주석제거

//request.setCharacterEncoding("EUC-KR"); //해당시스템의 인코딩타입이 EUC-KR일경우에

String inputYn = request.getParameter("inputYn");

String roadFullAddr = request.getParameter("roadFullAddr");

String roadAddrPart1 = request.getParameter("roadAddrPart1");

String roadAddrPart2 = request.getParameter("roadAddrPart2");

String engAddr = request.getParameter("engAddr");

String jibunAddr = request.getParameter("jibunAddr");

String zipNo = request.getParameter("zipNo");

String addrDetail = request.getParameter("addrDetail");

String admCd = request.getParameter("admCd");

String rnMgtSn = request.getParameter("rnMgtSn");

String bdMgtSn = request.getParameter("bdMgtSn");

String detBdNmList = request.getParameter("detBdNmList");

/** 2017년 2월 추가제공 **/

String bdNm = request.getParameter("bdNm");

String bdKdcd = request.getParameter("bdKdcd");

String siNm = request.getParameter("siNm");

String sggNm = request.getParameter("sggNm");

String emdNm = request.getParameter("emdNm");

String liNm = request.getParameter("liNm");

String rn = request.getParameter("rn");

String udrtYn = request.getParameter("udrtYn");

String buldMnnm = request.getParameter("buldMnnm");

String buldSlno = request.getParameter("buldSlno");

String mtYn = request.getParameter("mtYn");

String lnbrMnnm = request.getParameter("lnbrMnnm");

String lnbrSlno = request.getParameter("lnbrSlno");

/** 2017년 3월 추가제공 **/

String emdNo = request.getParameter("emdNo");

</head>

// opener관련 오류가 발생하는 경우 아래 주석을 해지하고, 사용자의 도메인정보를 입력합니다. ("주소입력화면 소스"도 동일하게 적용시켜야 합니다.)

//document.domain = "abc.go.kr";

function init(){

var url = location.href;

var confmKey = "api키값"; // 위에서 발급받은 api키값을 넣어줍니다.

var resultType = "4"; // 도로명주소 검색결과 화면 출력내용, 1 : 도로명, 2 : 도로명+지번, 3 : 도로명+상세건물명, 4 : 도로명+지번+상세건물명

var inputYn= "<%=inputYn%>";

if(inputYn != "Y"){

document.form.confmKey.value = confmKey;

document.form.returnUrl.value = url;

document.form.resultType.value = resultType;

document.form.action="http://www.juso.go.kr/addrlink/addrLinkUrl.do"; //인터넷망

//document.form.action="http://www.juso.go.kr/addrlink/addrMobileLinkUrl.do"; //모바일 웹인 경우, 인터넷망

document.form.submit();

}else{

opener.jusoCallBack("<%=roadFullAddr%>","<%=roadAddrPart1%>","<%=addrDetail%>","<%=roadAddrPart2%>","<%=engAddr%>","<%=jibunAddr%>","<%=zipNo%>", "<%=admCd%>", "<%=rnMgtSn%>", "<%=bdMgtSn%>", "<%=detBdNmList%>", "<%=bdNm%>", "<%=bdKdcd%>", "<%=siNm%>", "<%=sggNm%>", "<%=emdNm%>", "<%=liNm%>", "<%=rn%>", "<%=udrtYn%>", "<%=buldMnnm%>", "<%=buldSlno%>", "<%=mtYn%>", "<%=lnbrMnnm%>", "<%=lnbrSlno%>", "<%=emdNo%>");

window.close();

}

</script>

<!--

-->

</form>

</body>

</html>