자바스크립트 ] 주소로 카카오 맵 api 장소 표시하기(좌표 얻기)

• 카카오 지오코드 이용
• 아래 코드는 카카오 개발자에서 가져온 샘플코드 이다.
• 카카오 맵 지오코드를 이용하여 주소로 좌표를 얻을 수 있고, 이를 응용하여 활용할 수 있다.
• apis.map.kakao.com/web/sample/addr2coord/

수업시간 내용 복습입니다.

경도,위도가 아닌 주소를 json 으로 받아서 

주소를 경도,위도로 변경해서 변수에 담은 후에 

경도,위도로 마커를 표시한다.

 

해석부분은 주석처리로 이해한내용 적었습니다.

JS

 

<!-- 지도를 표시할 div 입니다 -->

        <div id="map" style="width:100%;height:350px;"></div>

        <script

            type="text/javascript"

            src="//dapi.kakao.com/v2/maps/sdk.js?appkey=617f8f5087f960a1ea77024f970d711c"></script>

        <script>

            var mapContainer = document.getElementById('map'), // 지도를 표시할 div

                mapOption = {

                    center: new kakao

                        .maps

                        .LatLng(33.450701, 126.570667), // 지도의 중심좌표

                    level: 3 // 지도의 확대 레벨

                };

            // 제이슨 형태로 받은 data를 화면에 테이블 형태로 출력하기 위한 함수 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다

            var map = new KaKao

                .maps

                .Map(mapContainer, mapOption);

            //지도 생성하기 주소-좌표 변환 객체를 생성합니다

            let geocoder = new KaKao

                .maps

                .services

                .geocoder();

                    //데이터

            let url = "https://api.odcloud.kr/api/3077888/v1/uddi:444645a3-bc90-47fd-aa42-d717c93c464" +

                    "a_201705111713?page=1&perPage=10&serviceKey=COog2VpGwoKjJbuLbsotfPe9FOvhuC5Ax5" +

                    "OLcRW2sAPnLle8ggr2h8GA%2B977YsNjZZzkz4vKnJOzvcAqqbfBUA%3D%3D";

            //공공데이터 포털에서 api 키 받은 후에 사용하는 open APi

            $.getJSON(url, function (data) {

                for (let i = 0; i < data.currentCount; i++) {

                    let txt = "<tr><td>" + data

                        .data[i]

                        .번호 + "</td><td>" + data

                        .data[i]

                        .명칭 + "</td><td>" + data

                        .data[i]

                        .소재지 + "</td><td>" + data

                        .data[i]

                        .전화번호 + "</td></tr>";

                    $("table").append(txt);

                }

            })

            // 주소들로 좌표를 검색합니다 json으로 받은 data.data[i].소재지를 넣어서 이름을 표시해주고,

            // function(result,status)는 받은 소재지의 경도,위도가 표시된다.

            geocoder.addressSearch(data.data[i].소재지, function (result, status) {

                //정상적으로 검색이 완료 됐으면 결과값으로 받은 위치를 마커로 표시합니다

                if (status === kakao.maps.services.status.ok) {

                    //내가 적은 소재지와 카카오 맵에 저장된 소재지가 일치한다면

                    let coords = new kakao

                        .maps

                        .LatLng(result[0].y, result[0].x);

                    // coords는 경도와 위도 marker라는 배열을 만들어서 배열안에 마커(객체)를 하나씩 담는다

                    let marker = new Array();

                    marker[i] = new kakao

                        .maps

                        .Marker({map: map, position: coords});

                    // 인포윈도우로 장소에 대한 설명을 표시합니다.

                    let infowindow = new KaKao.infowindow({

                        content: '<div style = "width:150px;text-align:center;padding:6px 0;">' + data

                            .data[i]

                            .명칭 + '<div>'

                    })

                    infowindow.open(map, marker[i]);

                    //지도의 중심을 결과값으로 받은 위치로 이동시킵니다.

                    map.setCenter(coords);

                }

            })

        </script>