[JavaScript] Daum 주소 검색 API 활용하기

Daum 주소 검색 API 활용하기 

1. '주소 찾기' 버튼 클릭

2. 주소찾기 팝업창에서 자신이 찾고자 하는 주소 검색 및 선택

3. 선택된 주소 회원가입페이지 주소 필드에 입력

4. 상세 주소 입력 

---

 Daum 에서 제공하는 주소록 API 

https://postcode.map.daum.net/guide =>> 참고링크

- Key를 발급 받을 필요가 없습니다.
- 사용량에 대한 제한이 없습니다.
- 기업용이든 상업적 용도이든 상관없이 무료로 사용 가능합니다.
- 기초구역번호가 발급된 도로명 주소, 영문 주소를 확인 가능합니다.
- 행정안전부에서 제공하는 "도로명 주소" DB를 직접 업데이트 받고 있으므로 가장 최신의 데이터를 이용하실 수 있습니 다.
- 하단 로고를 임의로 가릴 경우, 사용에 제약이 발생할 수 있습니다.
- JS API 스크립트를 임의 수정하여 사용할 경우, 사용에 제약이 발생할 수 있습니다.
- 본 서비스는 인터넷이 가능한 환경에서 동작합니다. 인트라넷(내부망) 환경은 공식적으로 지원하지 않으며, 별도 요청시 "사용하는 도메인" 정보만 제공 가능합니다.
- PC 및 모바일웹 환경에서 보편적으로 사용되는 대부분의 브라우저에서 동작됩니다.(IE11, Edge, Chrome, Safari 등)
 단, 커스텀 브라우저(벤더사 자체 제작 브라우저 및 웹뷰) 및 업데이트가 멈춘 오래된 브라우저에서는 정상 동작되지 않을 수 있습니다. (서비스 적용시 확인 필요)


//input 코드 
<input class="address_input_1" name="memberAddr1" readonly></input>
 
<input class="address_input_2" name="memberAddr2" readonly></input>
 
<input class="address_input_3" name="memberAddr3" readonly></input>

Daum 주소검색 API 연동 작업 중

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

/* Daum 주소 검색 Api */
function execution_daum_address() {
	
    //주소를 검색하는 팝업창을 띄우는 코드 부분 
	new daum.Postcode({
	    oncomplete: function(data) {
	        // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
	        // 예제를 참고하여 다양한 활용법을 확인해 보세요.
	        
	    	// 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var addr = ''; // 주소 변수
            var extraAddr = ''; // 참고항목 변수
            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                addr = data.roadAddress;
            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                addr = data.jibunAddress;
            }
            // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
            if(data.userSelectedType === 'R'){
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraAddr !== ''){
                    extraAddr = ' (' + extraAddr + ')';
                }
                // 조합된 참고항목을 해당 필드에 넣는다.
                addr += extraAddr;
            
            } else {
            	addr += '';
            }
            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            $(".address_input_1").val(data.zonecode);
            $(".address_input_2").val(addr);
            // 커서를 상세주소 필드로 이동한다.
            $(".address_input_3").attr("readonly",false);
            $(".address_input_3").focus();
	    }
	}).open();
}