[React] 카카오 Map _지도 생성, 현 위치 재검색 구현 (+카카오 로컬 API)

2021. 5. 30. 02:09ㆍWeb_Programming/React

 

이번 포스팅에서는 카카오 맵과 카카오 로컬 API 간단한 사용법에 대해서 써보려 합니다 😊

+2023.09.25 내용 업데이트

 

카카오 맵 API

 

제가 사용했던 API는 사진과 같이,

위도&경도를 이용하여 지도에 위치를 띄우고,

지도에서 이동 시, 현위치 재검색을 구현했습니다.

 

 

지도 생성

먼저 해야할 것은 kakao Developers 사이트에 애플리케이션 등록하여 인증키 [앱키 > JavaScript 키]를 발급받는 것 입니다.

(애플리케이션 등록 후 플랫폼까지 등록해야 합니다.)

https://developers.kakao.com/

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

그다음, index.html 파일 <head> 태그 안에 아래 해당 코드를 넣어줍니다.

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은앱키&libraries=services"></script>

(발급받은 앱 키 부분에 키를 복사해서 넣어줍니다.)

+보안상. env 파일에 변수로 선언해두는 것이 좋습니다.

 

우선 전체 코드는 다음과 같습니다.

declare global {
  interface Window {
    kakao: any;
  }
}
const Map: React.FC<locationProps> = ({ loc, setLoc, curLoc, markerArr }) => {
  const [mapCenter, setMapcenter] = useState<kakaoLocation>({
    title: "",
    y: loc.y,
    x: loc.x,
  });
  useEffect(() => {
    map();
  }, [loc, markerArr]);

  const onClickReSearch = () => {
    setLoc && setLoc(mapCenter);
  };
  /* 카카오 지도 생성 */
  const map = () => {
    const container = document.getElementById("mapContainer");
    const options = {
      center: new window.kakao.maps.LatLng(loc?.y, loc?.x),
      level: 5,
    };

    const map = new window.kakao.maps.Map(container, options);
    /* 내위치 마커 */
    new window.kakao.maps.Marker({
      map: map,
      position: new window.kakao.maps.LatLng(curLoc?.y, curLoc?.x),
      image: new window.kakao.maps.MarkerImage(
        "/assets/curLoc.png",
        new window.kakao.maps.Size(20, 20)
      ),
      clickable: true,
    });
    /* store 마커 */
    markerArr.map((el) => {
      new window.kakao.maps.Marker({
        map: map,
        position: new window.kakao.maps.LatLng(el.loc_y, el.loc_x),
        title: el.name,
        clickable: true,
      });
    });
    /* 지도 중심 좌표 */
    window.kakao.maps.event.addListener(map, "center_changed", function () {
      const center = map.getCenter();
      setMapcenter({ title: "", y: center.getLat(), x: center.getLng() });
    });
  };
  return (
  <>
    <button onClick={onClickReSearch}>
      <FontAwesomeIcon icon={faRedo} />
      <span>현 위치 검색</span>
    </button>
      <div
        id="mapContainer"
        style={{
          width: "100%",
          height: "300px",
        }}
      ></div>
      </>
  );
};
export default Map;

 

markerArr나 나의 위치에 따라서,

map 을 생성하는 코드입니다.

 

그러면 map 생성 함수부터 뜯어 보겠습니다.

 

step 1

우선 돔에서 mapContainer를 찾은 container와

지도 위치를 나의 위도, 경도로 설정한 options를 이용해

map을 생성합니다.

const map = () => {
    const container = document.getElementById("mapContainer");
    const options = {
      center: new window.kakao.maps.LatLng(loc?.y, loc?.x),
      level: 5,
    };

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

 

step 2

window.kakao.maps.Marker 함수를 이용해서,

나의 위치를 띄워줍니다.

 

+ 저는 마커 image를 커스텀하여 사용했습니다.

const map = () => {
	//...
    /* 내위치 마커 */
    new window.kakao.maps.Marker({
      map: map,
      position: new window.kakao.maps.LatLng(curLoc?.y, curLoc?.x),
      image: new window.kakao.maps.MarkerImage(
        "/assets/curLoc.png",
        new window.kakao.maps.Size(20, 20)
      ),
      clickable: true,
    });
  };

 

step 3

지도에 표시될 markerArr들을 통해

marker들을 생성해줍니다.

const map = () => {
	//...
    /* store 마커 */
    markerArr.map((el) => {
      new window.kakao.maps.Marker({
        map: map,
        position: new window.kakao.maps.LatLng(el.loc_y, el.loc_x),
        title: el.name,
        clickable: true,
      });
    });
    //...
  };

현 위치 재검색이 필요없다면, 여기까지만 구현하면 됩니다.

 

 

현 위치 재검색

step 4

현 위치 재검색을 위해

지도 위치 변경시 center 위치를 저장해 둡니다.

현 위치 재검색이 필요없다면, 생략해도 되는 부분입니다.

const map = () => {
	//...
    window.kakao.maps.event.addListener(map, "center_changed", function () {
      const center = map.getCenter();
      setMapcenter({ title: "", y: center.getLat(), x: center.getLng() });
    });
  };

 

 

현 위치 검색을 수행할 버튼에

나의 위치를 담는 상탯값 (loc)을 지도의 위치(mapCenter)로 변경시키는 handler를 연결해줍니다. (onClickReSearch)

 

loc이 변경되면, useEffect로 인해 map을 해당 위치를 중심으로 재생성됩니다.

  const [mapCenter, setMapcenter] = useState<kakaoLocation>({
    title: "",
    y: loc.y,
    x: loc.x,
  });
  useEffect(() => {
    map();
  }, [loc, markerArr]);

  const onClickReSearch = () => {
    setLoc(mapCenter);
  };

 

 

이렇게 되면, 지도 생성 + 현위치 재검색 기능 구현이 완료됩니다.

 

카카오 로컬 API

 

저는 카카오 로컬 API를 통해서,

도로명&지번 주소의 행정구역 값만 받기도 하고, X Y 좌표도 받을 수 있어서 유용하게 사용하였습니다.

 

먼저, 위에서 자바스크립트 앱 키 발급과 동일한 방법으로 REST API 키를 발급받습니다.

발급받은 키를 해당 아래 코드 표시된 곳에 넣어주고, fullAddress값에 이용하고 싶은 주소를 넣어줍니다.

 

 axios.get(`https://dapi.kakao.com/v2/local/search/address.json?query=${fullAddress}`, {
            headers: { Authorization: 'KakaoAK {발급받은 REST 키}' },
        })
            .then(res => {
                const location =res.data.documents[0];
                setLocationObj({
                    si:location.address.region_1depth_name,
                    gu:location.address.region_2depth_name,
                    dong:location.address.region_3depth_name,
                    locationX:location.address.x,
                    locationY:location.address.y,
                })
            })

콜백 함수에서 res.data.documents[0]을 통해 주소 정보들을 활용할 수 있습니다.

documents에는 위와 같은 정보들을 담고 있고 각 값들을 통해 더 많은 정보를 활용할 수 있습니다.

추가적인 내용은 아래에서 확인할 수 있습니다. 

https://developers.kakao.com/docs/latest/ko/local/dev-guide

 

Kakao Developers

카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.

developers.kakao.com

 

반응형
저작자표시

'Web_Programming > React' 카테고리의 다른 글

[React.js]리액트의 상탯값, 속성값, 반환값  (0) 2021.07.08
[React]구글 Oauth2 로그인 구현 with TypeScript  (0) 2021.06.09
[React]리액트 다음 우편번호 검색  (4) 2021.05.29
[React]리액트 메신져 멘션/언급 기능 구현  (0) 2021.04.21
[React]리액트 훅, 외부클릭 감지 모달창 구현  (0) 2021.04.18

관련글

댓글 4

티스토리툴바