카카오맵 지도 API 만들기

마커 찍기

import React, { useState } from 'react';
import { useEffect } from 'react';

declare global {
  interface Window {
    kakao: any;
  }
}

interface MapProps {
  // position: number;
  // setPosition: number;
  // saveLatLng: any;
  // setSaveLatLng: any;
}
const Maps = () => {
  const [saveLatLng, setSaveLatLng] = useState([]);
  useEffect(() => {
    const { kakao } = window; // CNA에서는 useEffect 바깥에서는 window 객체를 참조할 수 없음.
    kakao.maps.load(() => {
      const container = document.getElementById('map');
      // 지도불러오기
      const options = {
        center: new kakao.maps.LatLng(37.4848929702844, 126.89537799629241),
        level: 8,
      };
      // 초기 화면 경도와 위도 셋팅
      const map = new kakao.maps.Map(container, options);
      // 이제 위의 container와 options를 Map에 넣어보도록 하자
      const control = new kakao.maps.ZoomControl();
      map.addControl(control, kakao.maps.ControlPosition.TOPRIGHT);
      // 줌컨트롤 설정

      // const markerPosition = new kakao.maps.LatLng(
      //   37.4848929702844,
      //   126.89537799629241
      // );
      const marker = new kakao.maps.Marker({
        position: map.getCenter(),
        // 맵의 화면 가운데 마커를 설정하기
      });
      marker.setMap(map);
      // SetMap을 통해 랜더링하기

      // let saveLatLng = [];

      kakao.maps?.event.addListener(map, 'click', function (mouseEvent: any) {
        // 클릭이벤트(addListener)를 통해서 위도, 경도 정보를 가져옵니다
        const latlng = mouseEvent.latLng;

        //내가 클릭한 위도와 경도를 latlng로 설정
        // console.log('latlng', latlng);
        // saveLatLng.push({ latlng });

        marker.setPosition(latlng);
        // console.log(1, latlng);
        setSaveLatLng(latlng);

        // console.log(saveLatLng);
        // console.log('saveLatLng', saveLatLng);
        // 마커 위치를 클릭한 위치로 옮깁니다

        // console.log('위도 / 경도', latlng.La, latlng.Ma);

        // const message = '클릭한 위치의 위도는 ' + latlng.getLat() + ' 이고, ';
        // message += '경도는 ' + latlng.getLng() + ' 입니다';

        // const resultDiv = document.getElementById('clickLatlng');
        // resultDiv.innerHTML = message;
      });
    });
  }, []);
  console.log('saveLatLng', saveLatLng);
  return <div id="map" style={{ width: '100%', height: '400px' }}></div>;
};

export default Maps;

saveLatLng에 위도와 경도를 담았음