클러스터러와 인포윈도우를 같이 사용하고 싶습니다.ㅜㅠㅠㅠㅜ

지도/로컬 API에 대한 문의게시판입니다.


<body>
   <div id="map">
   </div>
   
   <script>
   
   var map = new kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
        center : new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표
        level : 14 // 지도의 확대 레벨
    });

    // 마커 클러스터러를 생성합니다
    // 마커 클러스터러를 생성할 때 disableClickZoom 값을 true로 지정하지 않은 경우
    // 클러스터 마커를 클릭했을 때 클러스터 객체가 포함하는 마커들이 모두 잘 보이도록 지도의 레벨과 영역을 변경합니다
    // 이 예제에서는 disableClickZoom 값을 true로 설정하여 기본 클릭 동작을 막고
    // 클러스터 마커를 클릭했을 때 클릭된 클러스터 마커의 위치를 기준으로 지도를 1레벨씩 확대합니다
   
    
    var clusterer = new kakao.maps.MarkerClusterer({
        map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
        averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
        minLevel: 10, // 클러스터 할 최소 지도 레벨
        disableClickZoom: true // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
    });
   
   // 데이터 넣기!
   var data = {
     "positions": [
       {
         "lat": 37.27943075229118,
         "lng": 127.01763998406159
       },
       {
         "lat": 37.55915668706214,
         "lng": 126.92536526611102
       },
       {
         "lat": 35.13854258261161,
         "lng": 129.1014781294671
       },
       {
         "lat": 37.55518388656961,
         "lng": 126.92926237742505
       }
     ]       /* ...... */
   };
   
   var markers = data.positions.map(function(position) {
       return new kakao.maps.Marker({
           position : new kakao.maps.LatLng(position.lat, position.lng)
       });
   });
    
   // 클러스터러에 마커들을 추가합니다
   clusterer.addMarkers(markers);   
    
   
    


    // 마커 클러스터러에 클릭이벤트를 등록합니다
    // 마커 클러스터러를 생성할 때 disableClickZoom을 true로 설정하지 않은 경우
    // 이벤트 헨들러로 cluster 객체가 넘어오지 않을 수도 있습니다
    kakao.maps.event.addListener(clusterer, 'clusterclick', function(cluster) {

        // 현재 지도 레벨에서 1레벨 확대한 레벨
        var level = map.getLevel()-1;

        // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
        map.setLevel(level, {anchor: cluster.getCenter()});
    });
   </script>
   
</body>
</html>

여기에 인포윈도우를 추가하려면 어떻게 해야할까요??ㅠㅜㅠㅜㅠㅜㅠㅜㅠㅠㅠ
여러 방법을 시도해보았지만 되지 않네요…

인포윈도우 동작 관련한 설명은 없어서 각 마커 별 인포윈도우를 표시하는 방법을 예로 들어서 설명드리겠습니다.

좌표 데이터를 받아와서 반복문을 돌 때 마커와 인포윈도우를 생성해주세요.
그리고 마커에 mouseover, mouseout 이벤트를 등록하고
mouseover 핸들러에는 infowindow.open(map, marker);로 인포윈도우가 보이게
mouseout 핸들러에서는 infowindow.close();로 인포윈도우가 닫히게 호출해주세요.
동작은 마커에 마우스가 올라가면 인포윈도우가 보이고 벗어나면 닫히게 됩니다.
그리고 생성한 마커는 배열로 관리해서 클러스터에 추가해주세요.

감사합니다!!!

1개의 좋아요