카카오(다음) 주소 검색 API 사용하기

다음 주소 찾기 API💒

 

https://postcode.map.daum.net/guide

Daum 우편번호 서비스

다음에서 지원하는 우편번호 서비스를 사용하여 웹페이지에서 주소 찾기를 구현

 

<기본 사용방법>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
        }
    }).open();
</script>

위의 코드를 변형해서 검색 버튼을클릭했을 때 우편번호, 지번주소, 도로명 주소를 찾는 방법

 

<div><input id="zoneCode" class="input" readonly="readonly" type="text" placeholder = " zipcode"/> <button onclick="findAddress()">검색</button></div>
<div><input id="address" class="input" readonly="readonly" type="text"placeholder = " 지번주소" / ></div>
<div><input id="Roadaddr" class="input" readonly="readonly" type="text"placeholder = " 도로명주소" /></div>

 

자바스크립트에 들어갈 함수 

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function findAddress(){
	new daum.Postcode({
        oncomplete: function(data) {
	    //우편번호 검색 결과 목록에서 특정 항목을 클릭한 경우, 해당 정보를 받아서 처리할 콜백 함수를 정의하는 부분입니다
            // 변수 값이 없는 경우엔 공백('')을 리턴
            var roadAddr = data.roadAddress; // 도로명 주소
            var Addr = data.jibunAddress;// 지번 주소 
            var code = data.zonecode //우편번호
            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            document.getElementById('zoneCode').value = data.zonecode;
            if(roadAddr !== ''){
                document.getElementById("Roadaddr").value = roadAddr;
            } 
            else if(jibunAddr !== ''){
                document.getElementById("address").value = code;
            }
        }
    }).open();
}
</script>