Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 16 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
react-native-naver-map [![npm version](https://badge.fury.io/js/react-native-nmap.svg)](https://badge.fury.io/js/react-native-nmap)
-----
----------------------------------

네이버맵의 리액트 네이티브 브릿지입니다.

![](https://raw.githubusercontent.com/QuadFlask/react-native-naver-map/master/example/screenshot/screenshot.png)


## 설치

```
Expand All @@ -27,14 +26,15 @@ $ cd ios/ && pod install

> ios의 경우 `git-lfs` 설치가 필요합니다. [참고](https://github.com/navermaps/ios-map-sdk#%EB%8C%80%EC%9A%A9%EB%9F%89-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%B0%9B%EA%B8%B0-%EC%9C%84%ED%95%B4-git-lfs-%EC%84%A4%EC%B9%98%EA%B0%80-%ED%95%84%EC%9A%94%ED%95%A9%EB%8B%88%EB%8B%A4)


### 안드로이드 추가 설정

[네이버 맵 안드로이드 SDK 문서](https://navermaps.github.io/android-map-sdk/guide-ko/1.html)를 따라 API키와 레포지터리 경로를 추가합니다

`/android/build.gradle` 파일에 아래와 같이 레포지터리를 추가합니다

> ⚠️ Bintray 지원 중단에 의해 jfrog로 수정되었습니다
> ~~⚠️ Bintray 지원 중단에 의해 jfrog로 수정되었습니다~~
>
> jfrog에서 repository로 변경되었습니다. [공식문서](https://navermaps.github.io/android-map-sdk/guide-ko/1.html)

```
allprojects {
Expand All @@ -43,13 +43,14 @@ allprojects {
jcenter()
// 네이버 지도 저장소
maven {
url 'https://naver.jfrog.io/artifactory/maven/'
url 'https://repository.map.naver.com/archive/maven'
}
}
}
```

`/android/app/src/AndroidManifest.xml`에 아래와 같이 추가하고 발급받은 클라이언트 아이디로 바꿔줍니다.

```xml
<manifest>
<application>
Expand Down Expand Up @@ -83,7 +84,7 @@ allprojects {

## 예제

> [example/App.js](https://github.com/QuadFlask/react-native-naver-map/blob/master/example/App.js)
> [example/App.js](https://github.com/QuadFlask/react-native-naver-map/blob/master/example/App.js)

```tsx
import NaverMapView, {Circle, Marker, Path, Polyline, Polygon} from "react-native-nmap";
Expand All @@ -110,7 +111,6 @@ function MyMap() {
}
```


## 컴포넌트

타입스크립트 타입 정의가 포함되어 있어 타입스크립트 사용을 추천합니다.
Expand All @@ -135,6 +135,7 @@ export interface Rect {
```

### `NaverMapView`

```ts
interface NaverMapViewProps {
center?: Coord & {
Expand Down Expand Up @@ -205,6 +206,7 @@ handleOnMapClick: (event: React.SyntheticEvent<{}, {
```

### `Marker`

```ts
interface MarkerProps {
coordinate: Coord
Expand Down Expand Up @@ -247,7 +249,9 @@ interface MarkerProps {
};
}
```

> 안드로이드 플랫폼에서 마커내 커스텀 뷰를 지원합니다. `0.0.57`
>
> ```js
> <Marker coordinate={P5} width={96} height={96}>
> <View style={{backgroundColor: 'rgba(255,0,0,0.2)', borderRadius: 80}}>
Expand All @@ -266,6 +270,7 @@ interface MarkerProps {
> ```

### `Polyline`

```ts
interface PolylineProps {
coordinates: Coord[]
Expand All @@ -276,6 +281,7 @@ interface PolylineProps {
```

### `Path`

```ts
interface PathProps {
coordinates: Coord[]
Expand All @@ -292,6 +298,7 @@ interface PathProps {
```

### `Circle`

```ts
export interface CircleProps {
coordinate: Coord[]
Expand All @@ -305,6 +312,7 @@ export interface CircleProps {
```

### `Polygon`

```ts
export interface PolygonProps {
coordinate: Coord[]
Expand All @@ -317,6 +325,7 @@ export interface PolygonProps {
```

### `LayerGroup`

```ts
export declare enum LayerGroup {
LAYER_GROUP_BUILDING = "building",
Expand All @@ -331,7 +340,5 @@ export declare enum LayerGroup {
## 참고

- *react-navigation*의 스택 스크린 사용시 안드로이드에서 맵뷰가 겹쳐 보이는 현상이 있을 경우 `useTextureView` 옵션을 추가해 주세요. [#27](https://github.com/QuadFlask/react-native-naver-map/issues/27)

- 안드로이드에서 `ScrollView` 내부에 추가할 경우 `scrollGesturesEnabled`를 이용해 맵 스크롤을 제어할 수 있습니다. [#62](https://github.com/QuadFlask/react-native-naver-map/issues/62)

- 마커 클러스터링에 필요한 지도 컨텐츠 영역은 `onCameraChange` 이벤트를 통해 얻을 수 있습니다. [#64](https://github.com/QuadFlask/react-native-naver-map/issues/64)