사용할 api는 다음의 주소 찾기 api이다.
https://postcode.map.daum.net/guide
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
다음 api에 비해 비교적 사용법이 간단해서 편하게 사용할 수 있다.
위 사이트에 있는 설명대로
<!DOCTYPE html>
<html lang="ko"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button type="button" name="btn">주소 찾기 버튼</button>
</body>
</html>
<script>
document.getElementsByName('btn')[0].onclick = function() {
new daum.Postcode({
oncomplete: function (data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
// 예제를 참고하여 다양한 활용법을 확인해 보세요.
}
}).open();
}
</script>
다음과 같이 코드를 작성하여 사용할 수 있다.
여기서 data라는 파라미터를 통해 값들을 추출할 수 있다.
예를 들어 data.address를 입력하면 선택한 주소를 문자로 반환해준다.