클러스터 마커에 텍스트 표시하기

치킨집 위치 데이터를 받아와 치킨지도를 만듭니다. 클러스터가 포함하는 마커의 개수가 10, 30, 50의 사이값 일때 클러스터 마커에 포함하는 마커의 개수가 아닌 각각 삐약, 꼬꼬, 꼬끼오, 치멘의 텍스트로 표시합니다

사용한 데이터를 보시려면 여기를 클릭하세요!

original docs : https://apis.map.kakao.com/web/sample/chickenClusterer/

결과

Loading...

라이브 에디터

function(){ const mapRef = useRef() const [positions, setPositions] = useState([]); useEffect(() => { setPositions(clusterPositionsData.positions); },[]) const getTexts = (size) => { // 한 클러스터 객체가 포함하는 마커의 개수에 따라 다른 텍스트 값을 표시합니다 if(size < 10) { return '삐약'; } else if(size < 30) { return '꼬꼬'; } else if(size < 50) { return '꼬끼오'; } else { return '치멘'; } } return ( <Map // 지도를 표시할 Container center={{ // 지도의 중심좌표 lat: 36.2683, lng: 127.6358, }} style={{ // 지도의 크기 width: "100%", height: "450px", }} level={14} // 지도의 확대 레벨 ref={mapRef} > <MarkerClusterer averageCenter={true} // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 minLevel={10} // 클러스터 할 최소 지도 레벨 disableClickZoom={true} // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다 calculator={[10, 30, 50]} // 클러스터의 크기 구분 값, 각 사이값마다 설정된 text나 style이 적용된다 texts={getTexts} // texts는 ['삐약', '꼬꼬', '꼬끼오', '치멘'] 이렇게 배열로도 설정할 수 있다 styles={[{ // calculator 각 사이 값 마다 적용될 스타일을 지정한다 width : '30px', height : '30px', background: 'rgba(51, 204, 255, .8)', borderRadius: '15px', color: '#000', textAlign: 'center', fontWeight: 'bold', lineHeight: '31px' }, { width : '40px', height : '40px', background: 'rgba(255, 153, 0, .8)', borderRadius: '20px', color: '#000', textAlign: 'center', fontWeight: 'bold', lineHeight: '41px' }, { width : '50px', height : '50px', background: 'rgba(255, 51, 204, .8)', borderRadius: '25px', color: '#000', textAlign: 'center', fontWeight: 'bold', lineHeight: '51px' }, { width : '60px', height : '60px', background: 'rgba(255, 80, 80, .8)', borderRadius: '30px', color: '#000', textAlign: 'center', fontWeight: 'bold', lineHeight: '61px' } ]} > {positions.map((pos) => ( <MapMarker key={`${pos.lat}-${pos.lng}`} position={{ lat: pos.lat, lng: pos.lng, }} /> ))} </MarkerClusterer> </Map> ); }

function(){
  const mapRef = useRef()
  const [positions, setPositions] = useState([]);

  useEffect(() => {
    setPositions(clusterPositionsData.positions);
  },[])


  const getTexts = (size) => {
    // 한 클러스터 객체가 포함하는 마커의 개수에 따라 다른 텍스트 값을 표시합니다
    if(size < 10) {
      return '삐약';
    } else if(size < 30) {
      return '꼬꼬';
    } else if(size < 50) {
      return '꼬끼오';
    } else {
      return '치멘';
    }
  }

  return (
    <Map // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: 36.2683,
          lng: 127.6358,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "450px",
        }}
        level={14} // 지도의 확대 레벨
        ref={mapRef}
      >
        <MarkerClusterer
          averageCenter={true} // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
          minLevel={10} // 클러스터 할 최소 지도 레벨
          disableClickZoom={true} // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
          calculator={[10, 30, 50]} // 클러스터의 크기 구분 값, 각 사이값마다 설정된 text나 style이 적용된다
          texts={getTexts} // texts는 ['삐약', '꼬꼬', '꼬끼오', '치멘'] 이렇게 배열로도 설정할 수 있다
          styles={[{ // calculator 각 사이 값 마다 적용될 스타일을 지정한다
                  width : '30px', height : '30px',
                  background: 'rgba(51, 204, 255, .8)',
                  borderRadius: '15px',
                  color: '#000',
                  textAlign: 'center',
                  fontWeight: 'bold',
                  lineHeight: '31px'
              },
              {
                  width : '40px', height : '40px',
                  background: 'rgba(255, 153, 0, .8)',
                  borderRadius: '20px',
                  color: '#000',
                  textAlign: 'center',
                  fontWeight: 'bold',
                  lineHeight: '41px'
              },
              {
                  width : '50px', height : '50px',
                  background: 'rgba(255, 51, 204, .8)',
                  borderRadius: '25px',
                  color: '#000',
                  textAlign: 'center',
                  fontWeight: 'bold',
                  lineHeight: '51px'
              },
              {
                  width : '60px', height : '60px',
                  background: 'rgba(255, 80, 80, .8)',
                  borderRadius: '30px',
                  color: '#000',
                  textAlign: 'center',
                  fontWeight: 'bold',
                  lineHeight: '61px'
              }
          ]}
        >
          {positions.map((pos) => (
            <MapMarker
              key={`${pos.lat}-${pos.lng}`}
              position={{
                lat: pos.lat,
                lng: pos.lng,
              }}
            />
          ))}
        </MarkerClusterer>
      </Map>
  );
}