React Naver Map api 활용하기

요즘 개인 프로젝트로 인해 다양한 지도 api를 사용하고 있는데 그 중에서 Naver 지도에 대해
설명해보고자 한다.

 

1. 모든 API를 사용하는 것이 그렇듯 API key를 발급 받는다. 발급 방법에 대해서는 아래 링크를 통해 확인할 수 있다.

https://console.ncloud.com/dashboard

 

2. 발급 받은 key를 Public 파일 안에 있는 index.html에 head 부분에 아래 코드를 발급 받은 client id와 함께 넣어준다. 

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=[이곳에 입력]"></script>

3. 아래 코드를 참고하여 map을 만들어보면 된다. 

해당 지도는 기본 기능의 Web Dynamic Map  의 형태이며, 기능에 대해 주석을 달아놓았습니다. 

import { Container as MapDiv, NaverMap, useNavermaps } from "react-naver-maps";
import React, { useEffect, useState, useCallback } from "react";

function NaverMapPage() {
  const navermaps = useNavermaps();
  const [zoom, setZoom] = useState(13); // 초기 줌 레벨을 13으로 설정
  const [draggable, setDraggable] = useState(true); // 지도 인터랙션 드래깅을 활성화
  const [disableKineticPan, setDisableKineticPan] = useState(true); // 관성 드래깅 비활성화
  const [tileTransition, setTileTransition] = useState(true); // 타일 fadeIn 효과 활성화
  const [minZoom, setMinZoom] = useState(7); // 최소 줌 레벨을 7로 설정
  const [scaleControl, setScaleControl] = useState(true); // 모든 지도 컨트롤 활성화

  // 줌 레벨 변경 시 호출되는 콜백 함수
  const handleZoomChanged = useCallback((zoom) => {
    console.log(`zoom: ${zoom}`);
  }, []);

  // 버튼 스타일 정의
  const normalBtnStyle = {
    backgroundColor: "#fff",
    border: "solid 1px #333",
    outline: "0 none",
    borderRadius: "5px",
    boxShadow: "2px 2px 1px 1px rgba(0, 0, 0, 0.5)",
    margin: "0 5px 5px 0",
  };

  const selectedBtnStyle = {
    ...normalBtnStyle,
    backgroundColor: "#2780E3",
    color: "white",
  };

  return (
    <MapDiv
      style={{
        position: "relative",
        width: "100%",
        height: "600px",
      }}
    >
      <>
        <div
          style={{
            position: "absolute",
            top: 0,
            left: 0,
            zIndex: 1000,
            padding: 5,
          }}
        >
          <button
            style={draggable ? selectedBtnStyle : normalBtnStyle}
            onClick={() => {
              setDraggable((prev) => !prev); // 지도 인터랙션 드래깅 활성화/비활성화
            }}
          >
            지도 인터렉션
          </button>
          <button
            style={!disableKineticPan ? selectedBtnStyle : normalBtnStyle}
            onClick={() => {
              setDisableKineticPan((prev) => !prev); // 관성 드래깅 활성화/비활성화
            }}
          >
            관성 드래깅
          </button>
          <button
            style={tileTransition ? selectedBtnStyle : normalBtnStyle}
            onClick={() => {
              setTileTransition((prev) => !prev); // 타일 fadeIn 효과 활성화/비활성화
            }}
          >
            타일 fadeIn 효과
          </button>
          <button
            style={scaleControl ? selectedBtnStyle : normalBtnStyle}
            onClick={() => {
              setScaleControl((prev) => !prev); // 모든 지도 컨트롤 활성화/비활성화
            }}
          >
            모든 지도 컨트롤
          </button>
          <button
            style={normalBtnStyle}
            onClick={() => {
              setMinZoom((prev) => (prev === 10 ? 7 : 10)); // 최소 줌 레벨 변경
            }}
          >
            최소/최대 줌 레벨: {minZoom} ~ 21
          </button>
        </div>
        <NaverMap
          zoomControl
          zoomControlOptions={{
            position: navermaps.Position.TOP_RIGHT,
          }}
          defaultCenter={new navermaps.LatLng(37.3595704, 127.105399)} // 지도의 중심 좌표 설정
          defaultZoom={13} // 초기 줌 레벨 설정
          onZoomChanged={handleZoomChanged} // 줌 레벨 변경 시 호출되는 콜백 함수 설정
          // 나머지 옵션들은 그대로 두세요
        />
      </>
    </MapDiv>
  );
}

export default NaverMapPage;

 

 

개발자도 책을 읽어야해요!

교보문고