I T H

카카오 API를 이용한 우편번호, 지도 검색 본문

참고용자료

카카오 API를 이용한 우편번호, 지도 검색

thdev 2024. 1. 22. 13:04
-  API 를 통해 우편번호와 지도를 검색하는 방법은 여러가지가 있다.
- 구글을 통한 방법과, 네이버, 카카오 등 여러가지가 있다. 그중에서 카카오 API를 이용한 우편번호, 지도를 띄우는 방법을 알아보겠다. 

[우편번호 검색]

1. 아래 링크로 접속

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

 

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

 

2. 해당 사이트에 다양한 예제가 있지만 사용자가 선택한 값을 이용하는 예제를 가져와 보았다.

 

- 카카오 공식문서를 참고한 예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html>

<html>
<head>
<meta charset="EUC-KR">
<title>카카오api를 이용한 우편번호 찾기</title>
</head>
<body>
	<input type="text" id="sample6_postcode" placeholder="우편번호">
<input type="button" onclick="sample6_execDaumPostcode()" value="우편번호 찾기"><br>
<input type="text" id="sample6_address" placeholder="주소"><br>
<input type="text" id="sample6_detailAddress" placeholder="상세주소">
<input type="text" id="sample6_extraAddress" placeholder="참고항목">

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    function sample6_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
                var addr = ''; // 주소 변수
                var extraAddr = ''; // 참고항목 변수

                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                    addr = data.roadAddress;
                } else { // 사용자가 지번 주소를 선택했을 경우(J)
                    addr = data.jibunAddress;
                }

                // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
                if(data.userSelectedType === 'R'){
                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                    if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                        extraAddr += data.bname;
                    }
                    // 건물명이 있고, 공동주택일 경우 추가한다.
                    if(data.buildingName !== '' && data.apartment === 'Y'){
                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                    }
                    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                    if(extraAddr !== ''){
                        extraAddr = ' (' + extraAddr + ')';
                    }
                    // 조합된 참고항목을 해당 필드에 넣는다.
                    document.getElementById("sample6_extraAddress").value = extraAddr;
                
                } else {
                    document.getElementById("sample6_extraAddress").value = '';
                }

                // 우편번호와 주소 정보를 해당 필드에 넣는다.
                document.getElementById('sample6_postcode').value = data.zonecode;
                document.getElementById("sample6_address").value = addr;
                // 커서를 상세주소 필드로 이동한다.
                document.getElementById("sample6_detailAddress").focus();
            }
        }).open();
    }
</script>


</body>
</html>

3. 스프링을 사용중이라면 컨트롤러를 간단하게 작성해서 띄워보도록 하자.

- 우편번호API 호출에 관한 내용이므로 환경설정 viewResolver의 bean 등록에 대한 내용은 따로 다루진 않겠다.

	@RequestMapping("main/address.do")
	public String adress() {
		return "main/address";
	}

[결과화면]

- 우편번호 찾기 버튼 클릭시 해당 api를 불러온다.

[지도 띄우기]

1. 아래 주소로 접속한다.

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

 

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

 

2. "주소 선택시 지도도 함께 보여주기" 기능에 대한 예제도 가져왔다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>카카오api를 이용한 지도 띄우기</title>
</head>
<body>

<input type="text" id="sample5_address" placeholder="주소">
<input type="button" onclick="sample5_execDaumPostcode()" value="주소 검색"><br>
<div id="map" style="width:300px;height:300px;margin-top:10px;display:none"></div>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey="여기에 키를 넣어줘야됨"&libraries=services"></script>
<script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new daum.maps.LatLng(37.537187, 127.005476), // 지도의 중심좌표
            level: 5 // 지도의 확대 레벨
        };

    //지도를 미리 생성
    var map = new daum.maps.Map(mapContainer, mapOption);
    //주소-좌표 변환 객체를 생성
    var geocoder = new daum.maps.services.Geocoder();
    //마커를 미리 생성
    var marker = new daum.maps.Marker({
        position: new daum.maps.LatLng(37.537187, 127.005476),
        map: map
    });


    function sample5_execDaumPostcode() {
        new daum.Postcode({
            oncomplete: function(data) {
                var addr = data.address; // 최종 주소 변수

                // 주소 정보를 해당 필드에 넣는다.
                document.getElementById("sample5_address").value = addr;
                // 주소로 상세 정보를 검색
                geocoder.addressSearch(data.address, function(results, status) {
                    // 정상적으로 검색이 완료됐으면
                    if (status === daum.maps.services.Status.OK) {

                        var result = results[0]; //첫번째 결과의 값을 활용

                        // 해당 주소에 대한 좌표를 받아서
                        var coords = new daum.maps.LatLng(result.y, result.x);
                        // 지도를 보여준다.
                        mapContainer.style.display = "block";
                        map.relayout();
                        // 지도 중심을 변경한다.
                        map.setCenter(coords);
                        // 마커를 결과값으로 받은 위치로 옮긴다.
                        marker.setPosition(coords)
                    }
                });
            }
        }).open();
    }
</script>

</body>
</html>

 

3. <sacipt>태그안에 appkey="여기에 키를 넣어줘야됨" 이라고 써있는 부분에 key를 넣어줘야된다.

key를 넣어주는 이유는 사용자가 지도를 출력할수 있는 할당량이 정해져 있기 때문이다.

그렇기 때문에 key를 가져와서 넣어줘야 지도를 띄울수 있다.

[ key 가져오는 방법 ]

1. 아래 사이트로 접속한다.

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

2. 로그인하기

 

3. 로그인이 되었다면 시작하기 클릭

 

4. 애플리케이션을 하나 추가한다.

 

5. 웹에서 사용할꺼면 플랫폼 > 웹 사이트 도메인을 등록해야된다 ex) localhost:8082/

 

 

6. 앱 키 - JavaScript키를 가져오면된다.

 

 

7. 가져온 key를 아래 <script>안에 넣어준다.

[ 결과화면 ]

 

'참고용자료' 카테고리의 다른 글

[IT자격증] 정보처리기사 합격후기  (0) 2024.01.22
[ mongodb ] MongoDB 자동실행하는 방법  (0) 2024.01.22
코드 자동정렬 하는방법 - Prettier설치 및 예외  (0) 2024.01.22
이클립스 SVN 연동 방법 / 업데이트  (0) 2024.01.22
tomcat 서버 추가  (0) 2024.01.22
'참고용자료' Related Articles more