[React/Vite] 카카오맵 API 마커 표시, 클러스터 라이브러리 사용해보기

마커 표시

한 개

import { useEffect } from "react";
const { kakao } = window;

const App = () => {
  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };

    const map = new kakao.maps.Map(container, options);

    const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);

    const marker = new kakao.maps.Marker({position: markerPosition});
    marker.setMap(map);  // map에 marker를 활성화
  }, []);

  return (
    <>
      <div id="map" style={{ width: "500px", height: "400px" }}></div>
    </>
  );
};

export default App;

 

여러개 표시

import { useEffect } from 'react';
const { kakao } = window;

const App = () => {
  useEffect(() => {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };

    const map = new kakao.maps.Map(container, options);

    // 마커를 표시할 위치와 title 객체 배열
    const positions = [
      { title: '위치1', latlng: new kakao.maps.LatLng(33.450701, 126.570667) },
      { title: '위치2', latlng: new kakao.maps.LatLng(33.450901, 126.57) },
      { title: '위치3', latlng: new kakao.maps.LatLng(33.450787, 126.570667) },
      {
        title: '위치4',
        latlng: new kakao.maps.LatLng(33.451393, 126.570738),
      },
    ];

    for (let i = 0; i < positions.length; i++) {
      const marker = new kakao.maps.Marker({
        map: map, // 마커 표시할 지도
        position: positions[i].latlng, // 마커 표시 위치
        title: positions[i].title, // 마커 타이틀 (마커에 마우스 호버시 표시)
      });
    }
  }, []);

  return (
    <>
      <div
        id='map'
        style={{ width: '500px', height: '400px' }}
      ></div>
    </>
  );
};

export default App;

 

마커를 이미지로 표시하고싶은 경우

import { useEffect } from 'react';
const { kakao } = window;

const App = () => {
  useEffect(() => {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };

    const map = new kakao.maps.Map(container, options);

    const markerPosition = new kakao.maps.LatLng(33.450701, 126.570667);
    const markerPosition2 = new kakao.maps.LatLng(33.4508, 126.570667);
    const markerPosition3 = new kakao.maps.LatLng(33.450787, 126.570667);

    // 마커를 표시할 위치와 title 객체 배열
    const positions = [
      { title: '위치1', latlng: new kakao.maps.LatLng(33.450701, 126.570667) },
      { title: '위치2', latlng: new kakao.maps.LatLng(33.450901, 126.57) },
      { title: '위치3', latlng: new kakao.maps.LatLng(33.450787, 126.570667) },
      {
        title: '위치4',
        latlng: new kakao.maps.LatLng(33.451393, 126.570738),
      },
    ];

    // 마커로 사용할 이미지 주소
    const imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png';

    for (let i = 0; i < positions.length; i++) {
      // 마커 크기 설정
      const imageSize = new kakao.maps.Size(24, 35);

      // 마커 이미지 생성
      const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
      const marker = new kakao.maps.Marker({
        map: map, // 마커 표시할 지도
        position: positions[i].latlng, // 마커 표시 위치
        title: positions[i].title, // 마커 타이틀 (마커에 마우스 호버시 표시),
        image: markerImage,
      });
    }

    // const marker = new kakao.maps.Marker({ position: markerPosition });
    // marker.setMap(map);
  }, []);

  return (
    <>
      <div
        id='map'
        style={{ width: '500px', height: '400px' }}
      ></div>
    </>
  );
};

export default App;

 

 

Clusterer 사용하기

클러스터 라이브러리 불러오기

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=%VITE_KAKAO_MAP_API_KEY%&libraries=clusterer"></script>

기존에 API 사용을 위해 불러왔던 script 태그에 &libraries=clusterer 부분을 추가한다!

바보처럼 그냥 스크립트 태그를 하나 더 추가해서 clusterer가 constructor가 아니라는 오류가 떴다 ㅠㅠ

kakao.maps.MarkerClusterer is not a constructor

 

import { useEffect } from 'react';
const { kakao } = window;

const App = () => {
  useEffect(() => {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };

    const map = new kakao.maps.Map(container, options);

    // 마커를 표시할 위치와 title 객체 배열
    const positions = [
      { title: '위치1', latlng: new kakao.maps.LatLng(33.450701, 126.570667) },
      { title: '위치2', latlng: new kakao.maps.LatLng(33.450901, 126.57) },
      { title: '위치3', latlng: new kakao.maps.LatLng(33.450787, 126.570667) },
      {
        title: '위치4',
        latlng: new kakao.maps.LatLng(33.451393, 126.570738),
      },
    ];

    const markers = positions.map(function (position) {
      return new kakao.maps.Marker({
        position: position.latlng,
      });
    });

    // 마커 클러스터러 생성
    const clusterer = new kakao.maps.MarkerClusterer({
      map: map, // 마커들을 클러스터러로 관리하고 표시할 지도 객체
      averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터러 마커 위치로 설정
      minLevel: 3, // 클러스터 할 최소 지도 레벨
      markers: markers,
    });
  }, []);

  return (
    <>
      <div
        id='map'
        style={{ width: '500px', height: '400px' }}
      ></div>
    </>
  );
};

export default App;

 

 

Clusterer에 이벤트 등록하기

import { useEffect } from 'react';
const { kakao } = window;

const App = () => {
  useEffect(() => {
    const container = document.getElementById('map');
    const options = {
      center: new kakao.maps.LatLng(33.450701, 126.570667),
      level: 3,
    };

    const map = new kakao.maps.Map(container, options);

    // 마커를 표시할 위치와 title 객체 배열
    const positions = [
      { title: '위치1', latlng: new kakao.maps.LatLng(33.450701, 126.570667) },
      { title: '위치2', latlng: new kakao.maps.LatLng(33.450901, 126.57) },
      { title: '위치3', latlng: new kakao.maps.LatLng(33.450787, 126.570667) },
      {
        title: '위치4',
        latlng: new kakao.maps.LatLng(33.451393, 126.570738),
      },
    ];

    const markers = positions.map(function (position) {
      const marker = new kakao.maps.Marker({
        position: position.latlng,
      });

      kakao.maps.event.addListener(marker, 'click', function () {
        console.log('marker click', marker.getPosition());
      });

      return marker;
    });

    // 마커 클러스터러 생성
    const clusterer = new kakao.maps.MarkerClusterer({
      map: map,
      averageCenter: true,
      minLevel: 3,
      markers: markers,
      disableClickZoom: true,
    });

    kakao.maps.event.addListener(clusterer, 'clusterclick', function (cluster) {
      alert('clusterClick!');
    });
  }, []);

  return (
    <>
      <div
        id='map'
        style={{ width: '500px', height: '400px' }}
      ></div>
    </>
  );
};

export default App;