react-naver-map-lib

리액트용 네이버 지도 라이브러리

모든 소스코드는 네이버 지도 API v3 를 기반으로 만들었습니다.
(링크 : https://navermaps.github.io/maps.js.ncp/docs/)

version

• v0.0.26 (2024-01-09)

  • 코드 번들링 (번들 사이즈 최적화, 자바스크립트 코드 호환)
  • 컴포넌트 추가 (Polygon, Rectangle)

Example (예시)

1. 지도 불러오기

import { Map } from '@sd.florida/react-naver-map-lib'

function Component() {
  const apiKey = 'ncp application에서 발급받은 지도 API KEY'
  const mapOption = {
    id: 'sampleMap',
    center: { lat: 37.519815468, lng: 126.926136767 },
    zoom: 14,
  }
  return <Map width="1000px" height="800px" mapOption={mapOption} apiKey={apiKey} />
}

2. 마커 불러오기

import { Map, Marker } from '@sd.florida/react-naver-map-lib'

function Component() {
  // apiKey, mapOption 생략

  const markerOption = {
    position: { lat: 37.519815468, lng: 126.926136767 },
  }

  return (
    <Map width="1000px" height="800px" mapOption={mapOption} apiKey={apiKey}>
      <Marker key="markerKey" markerOption={markerOption} />
    </Map>
  )
}

3. option interface

   • Map
     • https://navermaps.github.io/maps.js.ncp/docs/naver.maps.html#.MapOptions
   • Marker
     • link: ``

4. event interface

   • Map
     • click
     • zoom