[React] 카카오지도API 사용하기 (2023.06.05)

 

React에서 카카오지도 API 사용하기

 

🎈 OPEN API  사용하는 방법

 

 

🎈 key 발급받기

 

1. 로그인 후 애플리케이션 추가

 

React는 JavaScript 기반이므로 JavaScript 코드 사용할 예정

 

 

2. web 플랫폼 등록하기

 

 

 

 

만약 jsp/servlet에서도 사용할거라면 해당 주소도 추가(ex. 8080)해야 사용할 수 있다!

 

3. react-kako-maps-sdk 로 리액트에서 kakao map 사용하기

 

 

typeScript 자료형 지정해주는 script >> 최근 뜨는 중 

 

3.1. index.html head태그에 api 입력

 

    <script

  type="text/javascript"

  src="//dapi.kakao.com/v2/maps/sdk.js?appkey=본인key&libraries=services,clusterer"

></script>

 

3.2. react-kakao-maps-sdk 설치

 

 

3.3. App.js 작성

 

MapMarker, Map > import 해줘야 함!

import "./App.css";

import { MapMarker, Map } from "react-kakao-maps-sdk";

function App() {

  return (

    <div>

      <Map

        center={{ lat: 33.5563, lng: 126.79581 }}

        style={{ width: "100%", height: "360px" }}

      >

        <MapMarker position={{ lat: 33.55635, lng: 126.795841 }}>

          <div style={{ color: "#000" }}>Hello World!</div>

        </MapMarker>

      </Map>

    </div>

  );

}

export default App;

 

 

🎈 여러개 마커에 이벤트 등록하기1 활용해보기

index.html

    <script

      type="text/javascript"c

      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=e77e282f01b0b2718596e16811e7e6af&libraries=services,clusterer"

    ></script>

 

import React from "react";
import { useMap, MapMarker, Map } from "react-kakao-maps-sdk";
import { useState } from "react";

const App2 = () => {
  //지도 중심 좌표를 나타낼 states
  const [centerLat, setCenterLat] = useState(33.450701);
  const [centerLon, setCenterLon] = useState(126.570667);
  const [level, setLevel] = useState(3);
  const [data, setData] = useState([
    {
      content: <div style={{ color: "#000" }}>카카오</div>,
      latlng: { lat: 33.450705, lng: 126.570677 },
    },
    {
      content: <div style={{ color: "#000" }}>생태연못</div>,
      latlng: { lat: 33.450936, lng: 126.569477 },
    },
    {
      content: <div style={{ color: "#000" }}>텃밭</div>,
      latlng: { lat: 33.450879, lng: 126.56994 },
    },
    {
      content: <div style={{ color: "#000" }}>근린공원</div>,
      latlng: { lat: 33.451393, lng: 126.570738 },
    },
  ]);

  const EventMarkerContainer = ({ position, content }) => {
    const map = useMap();
    const [isVisible, setIsVisible] = useState(false);

    return (
      <MapMarker
        position={position} // 마커를 표시할 위치
        // @ts-ignore
        onClick={(marker) => map.panTo(marker.getPosition())}
        onMouseOver={() => setIsVisible(true)}
        onMouseOut={() => setIsVisible(false)}
      >
        {isVisible && content}
      </MapMarker>
    );
  };

  const smhrdMarker = () => {
    console.log("smhrdMarker");
    setCenterLat(35.149896);
    setCenterLon(126.9197772);
    setData([
      {
        content: <div style={{ color: "#000" }}>본점</div>,
        latlng: { lat: 35.149896, lng: 126.9197772 },
      },
      {
        content: <div style={{ color: "#000" }}>남구점</div>,
        latlng: { lat: 35.110479, lng: 126.877456 },
      },
    ]);

    setLevel(8);
  };

  return (
    <div>
      <Map // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: centerLat,
          lng: centerLon,
        }}
        style={{
          // 지도의 크기
          width: "100%",
          height: "450px",
        }}
        level={level} // 지도의 확대 레벨
      >
        {data.map((value) => (
          <EventMarkerContainer
            key={`EventMarkerContainer-${value.latlng.lat}-${value.latlng.lng}`}
            position={value.latlng}
            content={value.content}
          />
        ))}
      </Map>

      <button onClick={smhrdMarker}>스마트인재개발원</button>
    </div>
  );
};

export default App2;

 

 

React 프로젝트 git-hub 사용시 주의사항

 

npm install 후에 start 해줘야 함!

(비추) npm install --force 
(비추) npm update