보라코딩
카카오 주소 api 본문
이건 카카오 개발자 사이트 가입도 필요 없다!
https://postcode.map.daum.net/guide
아래 참고!
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
<!-- 카카오 주소 api -->
<div class="mb-3">
<label for="findAddress">맛집 주소</label>
<input type="button" value="우편번호찾기" onclick="kakaopost()" id="findAddress">
<input type="text" name="zipcode" id="zipcode" size="7"
class="form-control" readonly>
<input type="text" name="storeAddress" id="address"
size="70" class="form-control" >
</div>
<div class="mb-3">
<label for="findAddress">맛집 주소</label>
<input type="button" value="우편번호찾기" onclick="kakaopost()" id="findAddress">
<input type="text" name="zipcode" id="zipcode" size="7"
class="form-control" readonly>
<input type="text" name="storeAddress" id="address"
size="70" class="form-control" >
</div>
<!-- 카카오 주소 api -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function kakaopost() {
new daum.Postcode({
oncomplete: function(data) {
document.querySelector("#zipcode").value = data.zonecode;
document.querySelector("#address").value = data.address
}
}).open();
}
</script>
<!--끝-->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
function kakaopost() {
new daum.Postcode({
oncomplete: function(data) {
document.querySelector("#zipcode").value = data.zonecode;
document.querySelector("#address").value = data.address
}
}).open();
}
</script>
<!--끝-->
'코딩 > Spring' 카테고리의 다른 글
TASTEMATE 맛집 진행사항 (0) | 2023.05.24 |
---|---|
새창 띄우기 (자바스크립트 사용) (0) | 2023.05.24 |
카카오 지도 api (0) | 2023.05.24 |
Day103_230524_ 프로젝트 진행사항 (0) | 2023.05.24 |
Day102_230523_스프링부트 파일 업로드 (+ 업로드 후 이미지 보여주기) (1) | 2023.05.23 |