[REACT] KAKAO MAPS API 사용해서 지도 그리기, 현재 위치 표시하기

Kakao Maps API를 사용하여 사용자의 현재 위치를 지도에 표시하는 방법에 대해 정리해보려고 한다.

 

Geolocation API를 통해 현재 위치를 가져오고, 해당 위치를 Kakao Maps에 표시하는 방식으로 구현했는데, 구체적인 과정을 단계별로 설명해보자!

 

그 전에, 현재 위치를 Geolocation API를 사용해서 가져오는 방식이 가장 보편적인 것을 알았다.

Geolocation API란?

Geolocation API는 웹 브라우저에서 사용자의 현재 위치 정보를 얻을 수 있게 해주는 API이다.

이 API를 사용하면 사용자의 허락을 받아 현재 위치를 가져올 수 있다.

 

아래와 같이 호출하여 현재 위치를 가져올 수 있다.

navigator.geolocation.getCurrentPosition(successCallback, errorCallback)

 

• successCallback: 위치 정보를 성공적으로 가져왔을 때 호출되는 함수.
• errorCallback: 위치 정보를 가져오는 데 실패했을 때 호출되는 함수.

 

준비물 

Kakao Developers 계정 (API 키 발급)

 

Kakao Map API를 사용하기 위해서는 API키를 발급받아야 한다. 

 

아래 포스팅을 참고해서 키를 발급받았다.

https://velog.io/@tpgus758/React%EC%97%90%EC%84%9C-Kakao-map-API-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

React에서 Kakao map API 사용하기

 

발급받은 Javascript API키 불러오기

 

 

/public/index.html 

파일에서 아래 코드 추가

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=여기에 발급받은 APP KEY를 넣으시면 됩니다."></script>

 

 

 

구현과정

1. 위치 정보를 가져오는 custom Hook 만들기 - useLocation

우선, 사용자의 위치 정보를 가져오는 커스텀 Hook을 만들었다.

이 Hook은 useEffect를 사용하여 컴포넌트가 마운트될 때 Geolocation API를 호출하는 역할을 한다

 

//useLocation.js

import { useEffect, useState } from "react";

export default function useLocation() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    if (navigator.geolocation) {
      // Geolocation API를 사용하여 현재 위치를 가져오기
      navigator.geolocation.getCurrentPosition(success, error);
    }

    function success(position) {
      // 위치 정보를 성공적으로 가져왔을 때의 처리
      setLocation({
        latitude: position.coords.latitude,
        longitude: position.coords.longitude,
      });
    }

    function error() {
      // 위치 정보를 가져오는 데 실패했을 때의 처리
      setLocation({
        latitude: 37.483034,
        longitude: 126.902435,
      });
      console.log("위치 받기 실패");
    }
  }, []);

  return location;
}

 

 

 

2. Kakao Map을 표시하는 컴포넌트 만들기

다음으로, Kakao Map을 표시하는 컴포넌트를 만들었다.

이 컴포넌트는 useLocation Hook을 사용하여 현재 위치를 가져오고, 해당 위치를 중심으로 지도를 표시하는 역할을 한다.

 

import { useEffect, useRef } from "react";
import useLocation from "./useLocation";
const { kakao } = window; //전역 window 객체에서 kakao를 추출

export default function KakaoMap() {
  const mapRef = useRef(null);
  const location = useLocation(); // 사용자의 현재 위치를 반환하는 훅, { latitude, longitude } 형식의 객체

  useEffect(() => { //location의 값이 변경될 때마다 실행
    if (location) {
      // Kakao Maps API를 비동기로 로드
      kakao.maps.load(() => {
        const container = document.getElementById("map"); //id="map"인 div 요소를 참조해서 지도를 표시할 HTML 요소를 가져옴 
        const options = {//지도 생성 옵션
          center: new kakao.maps.LatLng(location.latitude, location.longitude), //객체를 사용하여 위도와 경도로 설정
          level: 3, //지도의 확대 수준을 설정
        };

        // 지도를 생성하고, mapRef에 저장
        const map = new kakao.maps.Map(container, options); //지도를 생성하는 코드
        mapRef.current = map; //생성된 Kakao Map 인스턴스를 mapRef에 저장하여 이후에 접근하거나 조작할 수 있도록 함
      });
    }
  }, [location]);

  return <div id="map" style={{ width: "1000px", height: "1000px" }}></div>;
}

 

 

 

3. 버튼 클릭으로 위치 조정하기

지도를 이리저리 옮겨다니다가 다시 내 위치로 돌아오고싶어서 '현위치'버튼을 만들고자 한다.

 

 //...위는 동일
 
  const handleRelocate = () => { //현위치로 돌리는 핸들러 함수 추가
    console.log("location", location);
    if (location && mapRef.current) {
      const newCenter = new kakao.maps.LatLng(
        location.latitude,
        location.longitude
      );
      mapRef.current.setCenter(newCenter);
    }
  };
  
    return (
    <>
      <div id="map" style={{ width: "1000px", height: "1000px" }}></div>
      <button onClick={handleRelocate}>현위치</button>
    </>
  );
};