반응형
카카오우편번호 API 사용하기
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
위의 주소에 가서 스크립트 코드를 복사하여 가지고 온 후에 주소검색 버튼 onclick 함수(openAddr)에 연결 시켜준다.
<body>
<h1>주소검색창</h1>
<h3>주소</h3>
<input type="text" id="postcode" placeholder="우편번호"><br>
<input type="text" id="addr1" placeholder="기본주소" size=50 >
<button type="button" onclick="openAddr()">주소검색</button><br>
<input type="text" id="addr2" placeholder="상세주소" size=50>
</body>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function openAddr() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
}
</script>
홈페이지에서 조금 아래로 내려가면 속성값을 가지고 올수있게 항목 이름들을 표로 만들어 놨다.
나는 우편코드(zonecode)와 기본주소(address), 건물명(buildingName)만 사용해 보겠다.
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function openAddr() {
new daum.Postcode({
oncomplete: function(data) {
document.querySelector("#postcode").value = data.zonecode;
let address = data.address;
if(data.buildingName){
address += "(" + data.buildingName + ")";
}
document.querySelector("#addr1").value = address;
}
}).open();
}
</script>
반응형
'자바스프링웹공부(2024) > 자바스크립트' 카테고리의 다른 글
| 2024.08.29.JS - jQuery 사용하기 (0) | 2024.09.01 |
|---|---|
| 2024.08.28.JS - 날짜 (4) | 2024.09.01 |
| 2024.08.27.JS - 셀렉트박스 (2) | 2024.09.01 |
| 2024.08.26. JS - 익명함수사용, onload 이벤트, 라디오-체크박스 값출력 (0) | 2024.08.27 |
| 2024.08.14. JS - event (0) | 2024.08.19 |
