[지도API] 클러스터 count 숫자가 맞지 않는 문제

카카오맵 API (지도/로컬)
1

안녕하세요. 지도 API 관련 도움 요청 드립니다.

  • 첫번째 문제
    클러스터 적용시 json 파일을 연결해줄때 저는 json 파일은 따로 없고 간단한 주소의 배열만 갖고 있는 상태여서 jstl forEach문 내에서 geocoder.addressSearch를 이용하여 좌표를 구한뒤 스크립트 내 json에 넣어주었는데요.
    이때 jstl forEach문 안에서 클러스터를 생성하면 count는 정확하게 나오지만 원인을 모르겠는 div가 여러개 겹치면서 투명도가 진해지는 현상이 있었습니다. 아래는 코드입니다.

      	var data = {"positions": []}

  	// 주소-좌표 변환 객체를 생성합니다
  	var geocoder = new kakao.maps.services.Geocoder();
  	<c:forEach items="${mateMapList}" var="item">
  		// 주소로 좌표를 검색합니다
  		geocoder.addressSearch("${item}", function(result, status) {
  		    // 정상적으로 검색이 완료됐으면 
  		     if (status === kakao.maps.services.Status.OK) {
  	    	    var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
  		        data.positions.push({
  		        	 "lat": result[0].y,
  				      "lng": result[0].x
  		        });
  		        
  		        var clusterer = new kakao.maps.MarkerClusterer({
  			        map: map, 
  			        averageCenter: true, 
  			        minLevel: 1,
  			        texts: getTexts, 
  			        styles: [{ 
  			                width : '150px', height : '150px',
  			                background: 'rgba(19, 168, 158, .3)',
  			                borderRadius: '150px',
  			                color: '#fff',
  			                textAlign: 'center',
  			                fontSize: '1.4rem',
  			                fontWeight: 'bold',
  			                lineHeight: '150px',
  		                	textShadow: '0px 0px 6px #0e7770'
  			            }
  			        ]
  			    });
  		        
  				var imageSrc = '<%=request.getContextPath()%>/img/comm/map_marker.png', // 마커이미지의 주소입니다    
  				imageSize = new kakao.maps.Size(0, 0), // 마커이미지의 크기입니다
  				imageOption = {
  					offset : new kakao.maps.Point(15, 30)
  				}; 
  	
  				var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize,
  				imageOption), markerPosition = coords; // 마커가 표시될 위치입니다
  	       		 var markers = data.positions.map(function(position) {
  	            return new kakao.maps.Marker({
  	            	image : markerImage,
  	                position : new kakao.maps.LatLng(position.lat, position.lng)
  	            });
  	        });
  		    
  	        // 클러스터러에 마커들을 추가합니다
  	        clusterer.addMarkers(markers);    
  		    } 
  		});    
  	</c:forEach>

      // 클러스터 내부에 삽입할 문자열 생성 함수입니다 
      function getTexts( count ) {
  	  return count + "명";       
      }

  • 두번째 문제
    반복문 내에서 클러스터를 생성했기 때문이라고 파악하여 jstl forEach문 바깥에서 클러스트를 생성해보았더니 투명도 문제는 해결되었지만 count의 숫자가 맞지 않고 랜덤의 수가 들어가는 현상이 있습니다. 이 문제를 어떻게 해결하면 좋을까요? 아래는 코드입니다.

               var data = {"positions": []}
          // 마커 클러스터러를 생성합니다 
      var clusterer = new kakao.maps.MarkerClusterer({
          map: map, 
          averageCenter: true, 
          minLevel: 1,
          texts: getTexts, 
          styles: [{ 
                  width : '150px', height : '150px',
                  background: 'rgba(19, 168, 158, .3)',
                  borderRadius: '150px',
                  color: '#fff',
                  textAlign: 'center',
                  fontSize: '1.4rem',
                  fontWeight: 'bold',
                  lineHeight: '150px',
              	textShadow: '0px 0px 6px #0e7770'
              }
          ]
      });
  	// 주소-좌표 변환 객체를 생성합니다
  	var geocoder = new kakao.maps.services.Geocoder();
  	<c:forEach items="${mateMapList}" var="item">
  		// 주소로 좌표를 검색합니다
  		geocoder.addressSearch("${item}", function(result, status) {
  		    // 정상적으로 검색이 완료됐으면 
  		     if (status === kakao.maps.services.Status.OK) {
  	    	    var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
  		        data.positions.push({
  		        	 "lat": result[0].y,
  				      "lng": result[0].x
  		        });
  		        
  				var imageSrc = '<%=request.getContextPath()%>/img/comm/map_marker.png', // 마커이미지의 주소입니다    
  				imageSize = new kakao.maps.Size(0, 0), // 마커이미지의 크기입니다
  				imageOption = {
  					offset : new kakao.maps.Point(15, 30)
  				}; 
  	
  				var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize,
  				imageOption), markerPosition = coords; // 마커가 표시될 위치입니다
  	        var markers = data.positions.map(function(position) {
  	            return new kakao.maps.Marker({
  	            	image : markerImage,
  	                position : new kakao.maps.LatLng(position.lat, position.lng)
  	            });
  	        });
  		    
  	        // 클러스터러에 마커들을 추가합니다
  	        clusterer.addMarkers(markers);    
  		    } 
  		});    
  	</c:forEach>

      // 클러스터 내부에 삽입할 문자열 생성 함수입니다 
      function getTexts( count ) {
  	  return count + "명";       
      }

첫번째 문제의 사진과 두번째 문제의 사진 첨부합니다.
부디 도움 부탁드립니다.

12

2

클러스터러는 전역 변수로 한개만 생성해주세요.

개수가 맞지 않는 부분은 주소의 좌표를 받아 poistions에 담아주고
반복문을 계속 실행하고 있기 때문에
마커가 중복 생성되고 있고, 클러스터러에 수가 누적되고 있습니다.

모든 주소의 좌표를 구한 다음 반복문은 한 번 실행해서 마커를 생성하고
클러스터러에 담아주세요.

그리고 addressSearch는 비동기 방식이기 때문에
아래 promise를 이용해서 전체 주소를 가져온 다음 구현하거나
https://devtalk.kakao.com/t/geocoder-coord2address/83940/2

반복문에서 카운트를 체크해 다음 로직으로 아동하는 방법도 있습니다.
https://devtalk.kakao.com/t/addresssearch/44163/4?u=lea.ju

원하는 방식으로 구현해주세요.

1개의 좋아요
3

제안해주신 두번째 방법을 참고하였더니 해결되었습니다. 지도가 안나오는 문제가 있긴 했었는데 마지막에 clusterer.setMap(map); 을 붙여주니 쉽게 해결되는 문제였습니다. 정확한 답변 정말 감사드립니다!