TIL #41 | 카카오 지도 API 사용법

순수 JS 라이브러리를 React에 적용하기

window. 을 통해 전역으로 접근하여 사용할 수 있다.

전역적으로 선언한 모든 객체들은 window 안에 들어있다.
window.b()와 같이 사용할 때 똑같은 값이 반환된다.

1. index.html에 api 키 등록

2. 플랫폼 등록

<script>
	function loadMap() {
			var container = document.getElementById('map');
		var options = {
			center: new kakao.maps.LatLng(33.450701, 126.570667),
			level: 3
		};

		var map = new kakao.maps.Map(container, options);
	}
</script>

    const mapRef = useRef(null);
  const map = useRef(null);
  
  useEffect(() => {
    // 카카오맵 라이브러리를 HTML head에 추가
    const script = document.createElement('script');
    script.src =
      '//dapi.kakao.com/v2/maps/sdk.js?appkey=e63170e75fde04a415750e5958b42634&libraries=LIBRARY&autoload=false';
    document.head.appendChild(script);

    // 스크립트가 로드 된 후
    script.onload = () => {
      // 카카오맵이 로드된 후
      window.kakao.maps.load(() => {
        if (mapRef.current) {
          let options = {
            center: new window.kakao.maps.LatLng(37.5642135, 127.0016985),
            level: 5
          };

          map.current = new window.kakao.maps.Map(mapRef.current, options);
          // setMap(new window.kakao.maps.Map(mapRef.current, options));

          // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
          if (navigator.geolocation) {
            // GeoLocation을 이용해서 접속 위치를 얻어옵니다
            navigator.geolocation.getCurrentPosition(function (position) {
              let lat = position.coords.latitude, // 위도
                lon = position.coords.longitude; // 경도

              let locPosition = new window.kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
                message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다

              // 마커와 인포윈도우를 표시합니다
              displayMarker(locPosition, message);
            });
          } else {
            // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다

            let locPosition = new window.kakao.maps.LatLng(33.450701, 126.570667),
              message = 'geolocation을 사용할수 없어요..';

            displayMarker(locPosition, message);
          }
        }
      });
    };
  }, []);