Spring-MyWeb 주소

22.06.22 user 주소

주소 찾는 API 사용해보자.

1.행정안전부 정부기관에서 운영하는 사이트 API

사이트 들어가서 신청 - 다운로드 받아서 STS에 넣기

jusoPopup.jsp

사이트에서 받은 승인키 넣고, 원하는 주소 형식을 선택할 수도 있다.

var confmKey = "devU01TX0FVVEgyMDIyMDYyMjE2MTc1ODExMjcxNzc=";
var resultType = "4"; // 도로명주소 검색결과 화면 출력내용,1 : 도로명, 2 : 도로명+지번+상세보기(관련지번, 관할주민센터), 3 : 도로명+상세보기(상세건물명), 4 : 도로명+지번+상세보기(관련지번, 관할주민센터, 상세건물명)

userJoin.jsp

sample.jsp에서 goPopup() 복사해서 변경해서 사용.
주소찾기 태그에 이벤트 추가, 버튼누르면 goPopup() 호출

<div class="input-group-addon">
	<button type="button" class="btn btn-primary" onclick="goPopup()">주소찾기</button>
</div>
...
function goPopup(){
	//주소찾기 버튼을 누르면 절대경로로 팝업창을 오픈
	var pop = window.open("${pageContext.request.contextPath}/resources/popup/jusoPopup.jsp","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){
		//콜백 방식으로 받아온 데이터를 가입 폼에 자동 완성해주겠다.
		docuement.getElementById('addrBasic').value = roadAddrPart1;
		docuement.getElementById('addrDetail').value = addrDetail;
		docuement.getElementById('addrZipNum').value = zipNo;
}

2.카카오 주소 api

userJoin.jsp

원하는 예제코드 선택해서 복사해서 userJoin.jsp에 붙여넣기
버튼 이벤트 변경

<div class="input-group-addon">
	<button type="button" class="btn btn-primary" onclick="searchAddress()">주소찾기</button>
</div>
...
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
...
<script>
//다음(카카오) 주소 api 사용해보기
	
   function searchAddress() {
       new daum.Postcode({
           oncomplete: function(data) {
               // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
               // 각 주소의 노출 규칙에 따라 주소를 조합한다.
               // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('addrZipNum').value = data.zonecode;
                document.getElementById("addrBasic").value = addr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("addrDetail").focus();
            }
        }).open();
    }
</script>