카카오 주소 api 위도 경도 표시

카카오 주소 api를 사용해서 주소를 입력한 후에 위도 경도를 표시하는 방법
api 소스를 사용했으며, 주소 api에서 지도를 함께 가져와야 위ㆍ경도를 받아올 수 있다.

 

 

소스 코드

주소 api는 키를 발급받지 않아도 되지만, 지도가 포함되어 키를 발급받아야 한다.

<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>

//추가
<input type="text" name="find_lat" id="find_lat" value="" placeholder="위도"/>
<input type="text" name="find_lng" id="find_lng" value="" placeholder="경도"/>

<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 API KEY를 사용하세요&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);
 
                        //추가
                        document.getElementById('find_lat').value = result.y;
               		 	document.getElementById('find_lng').value = result.x;

                        // 지도를 보여준다.
                        mapContainer.style.display = "block";
                        map.relayout();
                        // 지도 중심을 변경한다.
                        map.setCenter(coords);
                        // 마커를 결과값으로 받은 위치로 옮긴다.
                        marker.setPosition(coords)
                    }
                });
            }
        }).open();
    }
</script>

 

//추가
부분 참고(html, script) 모두 추가 해줘야 함

 

 

결과

 

 

카카오 api 가이드 주소

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

Daum 우편번호 서비스