ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Daum map API, 클러스터링과 인포윈도우 생성하기
    IT, 프로그래밍/Spring 2018. 8. 2. 20:51

    현재 프로젝트에서 위치 좌표를 기반으로 마커를 생성할 일이 있어서 다음 지도 API를 사용하고 있습니다.

    클러스터링을 사용하면 위치 정보를 시각적인 효과를 높여서 제공할 수 있는데요, 아래는 적용을 완료한 그림입니다.

    < 관련 레퍼런스 >

    인포 윈도우 생성하기 : http://apis.map.daum.net/web/sample/basicInfoWindow/ 

    마커에 클릭 이벤트 등록 :http://apis.map.daum.net/web/sample/addMarkerClickEvent/ 

    클러스터에 클릭 이벤트 등록 : http://apis.map.daum.net/web/sample/addClustererClickEvent/ 

    클러스터 생성 : http://apis.map.daum.net/web/sample/basicClusterer/


    1) API키를 등록하여 Javascript APP KEY를 발급 받습니다. (키는 총 4개 나옵니다, 그 중 자바스크립트 키를 사용하시면 됩니다)

    그리고 라이브러리를 제공받을 링크를 걸어둡니다.


    1
    2
    3
    <script type="text/javascript"
        src="//dapi.kakao.com/v2/maps/sdk.js?appkey=YOUR APP KEY&libraries=services,clusterer,drawing"></script>
     
    cs

    2) HTML에 map이 그려질 영역을 정의합니다.


    1
    2
     <div id="map" style="width: 100%; height: 400px;"></div>
    cs


    3) 자바스크립트 코드를 작성합니다.


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
        //지도를 초기화 시키는 함수
        function initMap(){
         
             var map = new daum.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
                            center : new daum.maps.LatLng(36.2683127.6358), // 지도의 중심좌표 
                            level : 14 // 지도의 확대 레벨 
                        });
                        
                        // 마커 클러스터러를 생성합니다 
                        var clusterer = new daum.maps.MarkerClusterer({
                            map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
                            averageCenter: true// 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
                            minLevel: 10 // 클러스터 할 최소 지도 레벨 
                        });
                        
                    
                        //Ajax를 통해 좌표 데이터 map를 전송받는다.
                    
                    $.ajax({
                        
                        url : "데이터를 요청할 URL (to server...)",
                        type : "GET",
                        data : "",
                        dataType : "json",
                        success : function(data){
                            //요청에 성공하면 DB에서 꺼낸 데이터를 json 형식으로 응답 받는다.
                                    
                            //마커들을 저장할 변수
                                   var markers = $(data).map(function(i, position) {
                                       //마커를 하나 새로 만드는데, 위치값을 지정하고 클릭이 가능하게 설정함.
                                       var marker = new daum.maps.Marker({
                                            position : new daum.maps.LatLng(position.LAT, position.LNG),
                                            clickable : true
                                        });
                                       
                                       //띄울 인포윈도우 정의
                                      var iwContent = '<div style="padding:5px;">'
                                       +position.NAME+'<br/>'
                                       +position.ADDRESS+
                                       '</div>'// 인포윈도우에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
                                        iwRemoveable = true// removeable 속성을 ture 로 설정하면 인포윈도우를 닫을 수 있는 x버튼이 표시됩니다
     
                                        // 인포윈도우를 생성합니다
                                        var infowindow = new daum.maps.InfoWindow({
                                            content : iwContent,
                                            removable : iwRemoveable
                                        });
                                       
                                        // 마커에 클릭이벤트를 등록합니다
                                        daum.maps.event.addListener(marker, 'click'function() {
                                              // 마커 위에 인포윈도우를 표시합니다
                                         
                                              infowindow.open(map, marker);      
                                        });
                                       
                                        //생성된 마커를 반환합니다.
                                       return marker;
                                });
                        
                    
                                   
                                   // 마커 클러스터러에 클릭이벤트를 등록합니다
                                    // 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우
                                    // 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다
                                    daum.maps.event.addListener(clusterer, 'clusterclick'function(cluster) {
     
                                        // 현재 지도 레벨에서 1레벨 확대한 레벨
                                        var level = map.getLevel()-1;
     
                                        // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
                                        map.setLevel(level, {anchor: cluster.getCenter()});
                                    });
                                
                                   //클러스터에 마커들을 저장합니다.
                    clusterer.addMarkers(markers);
     
                            
                        },
                        error : function(xhr, status, error){
                            //요청에 실패하면 에러코드 출력  
                            alert("에러코드 : " + xhr.status);
                        }
                        
                        
                        
                    });
     
            }
    cs


    전송되는 json 형식은 Map 형태로 key는 LNG, LAT, ADDRESS, NAME 이 있습니다. LAN, LAT는 String 형태의 좌표값이고 나머지는 주소와 박물관 이름입니다.


    1
    2
    3
    [{"LNG":"126.974884","ADDRESS":"서울특별시 종로구 청운동 효자로 12","ID":"1234","LAT":"37.576693","NAME":"국립고궁박물관"},
    {"LNG":"126.980470","ADDRESS":"서울특별시 용산구 서빙고로 137(용산동6가 168-6)","ID":"2567","LAT":"37.523987","NAME":"국립중앙박물관"},
    {"LNG":"129.227830","ADDRESS":"경상북도 경주시 월성동 일정로 186","ID":"7890","LAT":"35.830423","NAME":"국립경주박물관"}]
    cs



    4) 각자 서버에 따라 데이터를 꺼내오는 로직을 작성합니다. 저 같은 경우는 스프링을 사용하였기 때문에 아래와 같은 컨트롤러에 매핑해 주었습니다.


    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @RequestMapping(value="/getGeoLocation", method= {RequestMethod.GET, RequestMethod.POST})
        @ResponseBody
        public List<Map<StringString>> getGeoLocation() {
            
            List<Map<StringString>>container = new ArrayList<>();
            container = museumService.getGeoLocation();
            
            return container;
        }
    cs



    이상 설명을 마치겠습니다.

    다음 API 문서에 상당히 설명히 친절하게 되어있기 때문에 참고 하시면 많은 도움이 될 것이라고 예상합니다.

    질문 있으시면 남겨주세요~~!

    댓글 3

Designed by Tistory.