0.0.20 • Published 10 months ago
@r2don/react-naver-map v0.0.20
react-naver-map
Introduction
네이버 맵을 리액트에서 사용하기 편하게 만들어 둔 라이브러리입니다.
Installation
# with npm
npm i @r2don/react-naver-map
# with yarn
yarn add @r2don/react-naver-map
# with pnpm
pnpm add @r2don/react-naver-map
Usage
기본 스타일이 적용되어있지 않으니, 필요에 맞게 width와 height를 적용해주세요.
Map component
import { Map, useNaverMapInit, Marker } from "@r2don/react-naver-map";
const MARKERS = [
{ latitude: 37, longitude: 127 },
{ latitude: 37.5, longitude: 127.5 },
{ latitude: 38, longitude: 128 },
{ latitude: 38.5, longitude: 128.5 },
];
function App() {
const { isLoaded } = useNaverMapInit();
if (!isLoaded) return null;
return (
<Map
center={{ latitude: 37.3595704, longitude: 127.105399 }}
style={{ height: "500px", width: "500px" }}
>
{MARKERS.map((marker) => (
<Marker key={JSON.stringify(marker)} position={marker} />
))}
</Map>
);
}
PolyLine Component
import { Map, useNaverMapInit, Marker, Polyline } from "@r2don/react-naver-map";
const MARKERS = [
{ latitude: 37, longitude: 127 },
{ latitude: 37.5, longitude: 127.5 },
{ latitude: 38, longitude: 128 },
{ latitude: 38.5, longitude: 128.5 },
];
function App() {
const { isLoaded } = useNaverMapInit();
if (!isLoaded) return null;
const path = [{ latitude: 37.3595704; longitude: 127.105399 }, { latitude: 37.3585781; longitude: 127.1053234 }];
const mid = {
latitude: (path[0].latitude + path[1].latitude) / 2,
longitude: (path[0].longitude + path[1].longitude) / 2,
}
return (
<Map
center={{ latitude: mid.latitude, longitude: mid.longitude }}
style={{ height: "500px", width: "500px" }}
>
{MARKERS.map((marker) => (
<Marker key={JSON.stringify(marker)} position={marker} />
))}
<Polyline path={path} />
</Map>
);
}
License
Licensed under the MIT License, Copyright (c) 2022 r2don.
See LICENSE for more information.
0.0.20
10 months ago
0.0.19
10 months ago
0.0.18
10 months ago
0.0.17
11 months ago
0.0.15
1 year ago
0.0.16
1 year ago
0.0.14
1 year ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
3 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.7
3 years ago
0.0.6
3 years ago
0.0.5
3 years ago
0.0.4
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
3 years ago