[React.js] react naver map API 사용하기

naver map api 예제를 보고 한땀한땀 component를 만들어서 사용해도 되지만, npm 을 뒤적거려보면 react-naver-maps 라는 잘되어있는 모듈을 만날 수 있다.

(필요하면 상황에 맞게 수정해서 쓰면 된다.)

 

 

설치

npm install react-naver-maps

 

 

Sample Code (지도 1개만 그릴 때)

import React from 'react';
import { RenderAfterNavermapsLoaded, NaverMap } from 'react-naver-maps';

function NaverMapComponent() {
  const id = this.props.itemData.id;
  return (
    <NaverMap
      mapDivId={"react-naver-map"}
      style={{
        width: '100%',
        height: '100vh'
      }}
      defaultCenter={{ lat: 37.554722, lng: 126.970833 }}
      defaultZoom={10}
    />
  );
}

function App() {
  return (
    <RenderAfterNavermapsLoaded
      ncpClientId={'YOUR_NCP_CLIENT_ID'}
      error={<p>Maps Load Error</p>}
      loading={<p>Maps Loading...</p>}
    >
      <NaverMapComponent />
    </RenderAfterNavermapsLoaded>
  );
}

export default App;

 

 

 

Sample Code (지도를 여러개 그릴때)

지도를 그릴때 하나의 지도 컴포넌트 Div id와 naver javascript api와 연결되어 있으므로 아래와 같이 div ID를 구별해주어야한다. 각각의 컴포넌트 별로 고유한 아이디값을 부여받아야 여러개의 dynamic 지도가 표시된다.

import React from 'react';
import { RenderAfterNavermapsLoaded, NaverMap } from 'react-naver-maps';

function NaverMapComponent() {
  const id = this.props.itemData.id;
  return (
    <NaverMap
      mapDivId={"mapId" + { id }}
      style={{
        width: '100%',
        height: '85vh'
      }}
      defaultCenter={{ lat: 37.554722, lng: 126.970833 }}
      defaultZoom={13}
    />
  );
}

function App() {
  return (
    <RenderAfterNavermapsLoaded
      ncpClientId={'YOUR_NCP_CLIENT_ID'}
      error={<p>Maps Load Error</p>}
      loading={<p>Maps Loading...</p>}
    >
      <NaverMapComponent id="1" />
      <NaverMapComponent id="2" />
    </RenderAfterNavermapsLoaded>
  );
}

export default App;

 

Marker 는 아래와 같이 추가할 수 있다.

const navermaps = window.naver.maps;

<Marker
	key={markerItem.id}
	position={
		new navermaps.LatLng(markerItem.position.lat, arkerItem.position.lng)
	}
	animation={markerItem.animation}
	onClick={() => {
		alert(title);
	}}
/>

 

 

Marker가 여러개인 경우 map 함수를 통해 간단하게 표기해줄 수 있다.

{markers.map((markerItem) => {
              return (
                <Marker
                  key={markerItem.id}
                  position={
                    new navermaps.LatLng(
                      markerItem.position.lat,
                      markerItem.position.lng
                    )
                  }
                  animation={markerItem.animation}
                  onClick={() => {
                    alert(title);
                  }}
                />
              );
            })}

 

 

 

한 개의 페이지에 여러개의 지도, 여러개의 Marker를 그릴때는 React의 Component와 속성, state값을 잘 생각해서 구성해주면 재사용을 거듭하여 간단하게 여러개의 정보를 표시해줄 수 있었다.

 

 

예시 출력

 

 

다음엔 OSRM 을 통해서 경로를 표시해봐도 좋을거 같다는 생각이 들었다.