ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 도로명주소 검색 API
      Web Programming 2023. 2. 6. 20:58
      728x90
      반응형

      도로명주소 검색 API 연동 !!

      우편번호 input 클릭 시 또는 우편번호검색 버튼 클릭 시 goPopup() 실행

      <tr>
 <th>우편번호</th>
  <td>
   <input type="text" id="postCode"  name="postCode" onmousedown="goPopup();" />	
   <input type="button" onClick="goPopup();" value="우편번호검색" class="button03"/>
  </td>
</tr>

<tr>
<th>회사 주소</th>
 <td>
  <input type="text" id="address"  name="address" class="mo-col-11" title="주소" />
  <input type="text" id="addressDetail"  name="addressDetail" title="상세주소"/>	
 </td>			
</tr>

       

      스크립트 부분

      <script>
	function goPopup(){
				// IE에서 opener관련 오류가 발생하는 경우, window에 이름을 명시해줍니다.
				window.name="jusoPopup";				
				// 주소검색을 수행할 팝업 페이지를 호출합니다.
				// 호출된 페이지(jusopopup.jsp)에서 실제 주소검색URL(http://www.juso.go.kr/addrlink/addrLinkUrl.do)를 호출하게 됩니다.
				var pop = window.open("/jusoPopup.do","pop","width=570,height=420, 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){				
				$("#address").val(roadAddrPart1); // 주소			
				$("#addressDetail").val(addrDetail);	// 상세주소
				$("#postCode").val(zipNo); // 우편번호	
	}
</script>

       

      컨트롤러에서 jsp 로 이동
      @RequestMapping(value = "/jusoPopup")
protected ModelAndView jusoPopup(HttpServletRequest request, HttpServletResponse response, HttpSession session) throws IOException{
					
		ModelAndView mav	= new ModelAndView();		
		mav.setViewName("/jusoPopup");
		return mav;
}
       
      주소 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> 
<% 
	request.setCharacterEncoding("UTF-8");  // 한글깨지면 주석제거
	
	String confmKey = "부여받은 승인 키"; // 검색API 승인키
	String domain = "http://www.juso.go.kr"; // 인터넷망
	// ※ 행정망 내에서 운영되는 시스템도 이용 가능합니다. 행정망 서비스를 위한 API 요청URL은 별도로 문의 주시기 바랍니다.(1588-0061)
	String resultType = "4"; // 검색결과 화면 출력유(1 : 도로명, 2 : 도로명+지번, 3 : 도로명+상세건물명, 4 : 도로명+지번+상세건물명)
%>
<script type="text/javascript" src="/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="/js/addrlink.js"></script>
<link rel="stylesheet" type="text/css" href="/css/addrlink.css"></link>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>주소정보연계 | 도로명주소 안내시스템</title>
<script language="javascript">
	//특수문자, 특정문자열(sql예약어) 제거
	function checkSearchedWord(obj){
		obj.value = obj.value+" ";
		//특수문자 제거
		if(obj.value.length >0){
			var expText = /[%=><]/ ;
			if(expText.test(obj.value) == true){
				obj.value = obj.value.split(expText).join(""); 
			}
			//체크 문자열
			var sqlArray = new Array( //sql 예약어
				"OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE", "DROP", "EXEC", "UNION",  "FETCH", "DECLARE", "TRUNCATE"
			);
			
			var regex;
			var regex_plus ;
			for(var i=0; i<sqlArray.length; i++){
				regex = new RegExp("\\s" + sqlArray[i] + "\\s","gi") ;
				if (regex.test(obj.value)) {
					obj.value =obj.value.replace(regex, "");
					alert("\"" + sqlArray[i]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");
				}
				regex_plus = new RegExp( "\\+" + sqlArray[i] + "\\+","gi") ;
				if (regex_plus.test(obj.value)) {
					obj.value =obj.value.replace(regex_plus, "");
					alert("\"" + sqlArray[i]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");
				}
			}
		}
		return obj.value = obj.value;
	}
	
	function searchUrlJuso(){
		$("#resultData").hide();
		var frm = document.AKCFrm;
		frm.keyword.value = checkSearchedWord(frm.keyword); // 특수문자 및 sql예약어 제거, 20160912
		$("#keyword").val(validateJuso($("#keyword").val())); //공백 및 특수문자 제거
		$("#keyword").val(regExpCheckJuso($("#keyword").val()));
		
		$.ajax({
			 url :"<%=domain %>/addrlink/addrLinkApiJsonp.do"  //인터넷망
			,type:"post"
			,data:$("#AKCFrm").serialize()
			,dataType:"jsonp"
			,crossDomain:true
			,success:function(xmlStr){
				if(navigator.appName.indexOf("Microsoft") > -1){
					var xmlData = new ActiveXObject("Microsoft.XMLDOM");
					xmlData.loadXML(xmlStr.returnXml)
				}else{
					var xmlData = xmlStr.returnXml;
				}
				$(".popSearchNoResult").html("");
				var errCode = $(xmlData).find("errorCode").text();
				var errDesc = $(xmlData).find("errorMessage").text();
				
				var totalCount = $(xmlData).find("totalCount").text();
				var currentPage = $(xmlData).find("currentPage").text();
				
				if( parseInt(totalCount) > 1000 && currentPage == "1" )
					alert("검색 결과가 너무 많습니다(1,000건 이상)\n검색어 예를 참조하여 검색하시기 바랍니다.");
				
				if(errCode != "0"){
					alert(errDesc);
				}else{
					if(xmlStr != null){
						makeList(xmlData);
					}
				}
			}
		    ,error: function(xhr,status, error){
		    	//alert("에러발생");
		    	alert("검색에 실패하였습니다 \n 다시 검색하시기 바랍니다.");
		    }
		});
			
	}
	
	function makeList(xmlStr){
		
		var htmlStr = "";
		if( $(xmlStr).find("totalCount").text() == "0" ){

			htmlStr +=' ';
			htmlStr += '<div class="popSearchNoResult" style="margin-top:10px; margin-bottom:5px;">';
			htmlStr += '	검색된 내용이 없습니다.';
			htmlStr += '</div>';
			htmlStr +='';
			
		}else{
			
			htmlStr += '<p class="text-guide">도로명주소 검색 결과 <strong>('+ $(xmlStr).find("totalCount").text()+'건)</strong></p>';
			htmlStr += '<table class="data-col" style="margin-top:3px;">';
			htmlStr += '	<caption>검색 결과</caption>';
			htmlStr += '	<colgroup>';
			htmlStr += '		<col style="width:8%">';
			htmlStr += '		<col>';
			htmlStr += '		<col style="width:11%">';
			htmlStr += '		<col style="width:14%">';
			htmlStr += '	</colgroup>';
			htmlStr += '	<thead>';
			htmlStr += '		<tr>';
			htmlStr += '			<th scope="col">No</th>';
			htmlStr += '			<th scope="col">도로명주소</th>';
			htmlStr += '			<th scope="col">&nbsp;</th>';
			htmlStr += '			<th scope="col">우편번호</th>';
			htmlStr += '		</tr>';
			htmlStr += '	</thead>';
			htmlStr += '	<tbody>';
	        
			var currentPage = parseInt($(xmlStr).find("currentPage").text());
			var countPerPage = parseInt($(xmlStr).find("countPerPage").text());
			var listNum = (currentPage*countPerPage)-(--countPerPage);
			var num = 0; 
			$(xmlStr).find("juso").each(function(){
				num++;
				
				var resultType = "<%= resultType%>"; 
	
				htmlStr += '<tr>';
				htmlStr +='	<td class="subj" style="text-align:center;">'+(listNum++)+'</td>';
					
				if( resultType == "1" ){
	
					htmlStr += '	<td class="subj" colspan="2" id="roadAddrTd'+num+' style="text-align:left; padding-left: 5px; line-height: 0.5em;">';
					htmlStr += '		<a href="javascript:setMaping(\''+num+'\')">'
}
}
}
}

      검색 후 결과

       

      주소검색

      상세주소 입력

       

      참고사이트(CSS 및 소스 코드 파일 다운) / 키 발급은 반드시 검색API로 발급!!

      Tech & Tips 상세보기 | 도로명주소 개발자센터 (juso.go.kr)

      원본 : 도로명주소 검색 API : 네이버 블로그 (naver.com)

      728x90
      반응형
      저작자표시 변경금지

      'Web Programming' 카테고리의 다른 글

      인스타 엑세스 토큰 받기  (0) 2023.02.07
      자바스크립트 인스타 토큰 갱신  (0) 2023.02.07
      kofic 영화리스트 연동  (0) 2023.02.06
      카카오지도 API  (0) 2023.02.06
      정보처리기능사 합격 후기  (1) 2023.02.06

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바