카카오 주소찾기 API 사용법

kys·2022년 11월 27일
0

SpringBoot

목록 보기
3/5

카카오 주소찾기 API

SpinrgBoot로 쇼핑몰을 구현하는 프로젝트를 진행중이다.
회원가입을 구현중에 회원의 주소를 받기위해
카카오 주소찾기 API를 사용했다.
상당히 간단하고 편리하다.


기본 사용 틀

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    new daum.Postcode({
        oncomplete: function(data) {
            // 실행 코드 부
        }
    }).open();
</script>

내가 사용한 코드

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

<script>
        window.onload = function(){
            document.getElementById("zipcode").addEventListener("click", function(){ //주소입력칸을 클릭하면
                //카카오 지도 발생
                new daum.Postcode({
                    oncomplete: function(data) { //선택시 입력값 세팅
                        document.getElementById("zipcode").value = data.zonecode; // 우편 번호 넣기
                        document.getElementById("address").value = data.address; // 주소 넣기
                        document.querySelector("input[name=address2]").focus(); //상세입력 포커싱
                    }
                }).open();
            });
        }      
</script>

profile
:)

0개의 댓글