kakao map

리엑트 심화 주차 프로젝트 중에 kakao map API 를 활용한 프로젝트를 진행 하고 있다.
프로젝트는 룸메이트를 찾는 웹 사이트를 만들기로 했다.

지도를 클릭하고 룸메를 구하는 작성자가 글을 작성하면 그 위치에 marker가 찍히고 룸메를 찾는 유저는 marker를 찍어서 글을 보거나 작성글 리스트를 찾아 보는 형식의 웹 사이트이다.

프로젝트를 진행중에 유저가 보고있는 화면내에서만 게시글을 읽어오면 좋겠다고 생각돼서 찾아보게 되었다.

useRef를 활용한 kakao map 정보 받아오기

kakao map component에 useRef를 사용하면 kakao map에 정보를 받아올 수 있었다.

지도 정보 얻어오기

지도 정보에는 각종 정보가 담겨있는데 그 중에 현재 화면에 표시되는 영역의 남서쪽 끝의 좌표와 북동쪽 끝의 좌표를 얻을 수 있었다.

이 좌표로 게시글에 들어가는 좌표를 비교하여 화면내의 게시글만 가져올 수 있겠다.

export const filterMarkersInBounds = (postsData, mapRef) => {
  const map = mapRef.current;
  if (!map) return [];

  const bounds = map.getBounds();
  const swLatLng = bounds.getSouthWest();
  const neLatLng = bounds.getNorthEast();

  return postsData.filter(
    (post) =>
      post.lat >= swLatLng.getLat() &&
      post.lat <= neLatLng.getLat() &&
      post.lng >= swLatLng.getLng() &&
      post.lng <= neLatLng.getLng(),
  );
};

위와 같이 좌표 정보로 화면내의 게시글을 filter하여 return하게 된다.

kakao map에서는 다양하고 편리한 기능이 아주 많이 지원한다.
다른 회사의 지도를 써 본건아니지만 지도를 다루는게 쉽게 느껴지고 재미있다.

참고 자료 : kakaoMap sdk 비공식 docs
위의 사이트 덕분에 쉽고 빠르게 해결중이다.