react-native-naver-map

react-native-naver-map

1. react-native-naver-map

참조

원본: react-native-naver-map

네이버맵 API

Directions 15

Geocoding

Reverse Geocoding

설치

npm install react-native-nmap --save;

• React Native 0.60+

$ cd ios/ && pod install

- **React Native <= 0.59**

$ react-native link react-native-nmap
$ cd ios/ && pod install

ios의 경우 git-lfs 설치가 필요합니다. 참고

안드로이드 추가 설정

네이버 맵 안드로이드 SDK 문서를 따라 API키와 레포지터리 경로를 추가합니다

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

⚠️ Bintray 지원 중단에 의해 jfrog로 수정되었습니다

allprojects {
    repositories {
        google()
        jcenter()
        // 네이버 지도 저장소
        maven {
            url '<https://naver.jfrog.io/artifactory/maven/>'
        }
    }
}

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

<manifest>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="YOUR_CLIENT_ID_HERE" />
    </application>
</manifest>

IOS 추가 설정

네이버 맵 IOS SDK 문서를 따라 API키와 레포지터리 경로를 추가합니다.

info.plist에 아래와 같이 발급받은 클라이언트 아이디를 추가해줍니다.

!https://user-images.githubusercontent.com/49827449/66392740-b2fd5f00-ea0b-11e9-8c38-23e604b1009d.png

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "<http://www.apple.com/DTDs/PropertyList-1.0.dtd>">
<plist version="1.0">
<dict>
...
    <key>NMFClientId</key>
    <string>YOUR_CLIENT_ID_HERE</string>
...
<dict>
<plist>

컴포넌트

타입스크립트 타입 정의가 포함되어 있어 타입스크립트 사용을 추천합니다.

기본 타입

export interface Coord {
  latitude: number;
  longitude: number;
}
export interface Region extends Coord {
  latitudeDelta: number;
  longitudeDelta: number;
}
export interface Rect {
  left?: number;
  top?: number;
  right?: number;
  bottom?: number;
}

NaverMapView

• center?: Coord & { zoom?: number; tilt?: number; bearing?: number; }: 중심 좌표를 나타냅니다. **Coord**는 좌표를 나타내는 객체이며, **zoom**은 확대/축소 수준, **tilt**는 시야의 기울기, **bearing**은 지도의 회전 각도를 나타냅니다.
• tilt?: number: 시야의 기울기를 나타냅니다.
• bearing?: number: 지도의 회전 각도를 나타냅니다.
• mapPadding?: Rect: 지도의 여백을 나타내는 영역을 설정합니다.
• logoMargin?: Rect: 로고의 여백을 나타내는 영역을 설정합니다.
• logoGravity?: Gravity: 로고의 위치를 설정합니다.
• onInitialized?: Function: 지도가 초기화된 후 호출되는 콜백 함수입니다.
• onCameraChange?: (event: { latitude: number; longitude: number; zoom: number; contentsRegion: [Coord, Coord, Coord, Coord, Coord]; coveringRegion: [Coord, Coord, Coord, Coord, Coord]; }) => void: 카메라의 위치가 변경될 때 호출되는 콜백 함수입니다.
• onMapClick?: (event: { x: number; y: number; latitude: number; longitude: number; }) => void: 지도를 클릭했을 때 호출되는 콜백 함수입니다.
• onTouch?: () => void: 지도 터치 이벤트가 발생했을 때 호출되는 콜백 함수입니다.
• showsMyLocationButton?: boolean: 내 위치 버튼의 표시 여부를 설정합니다.
• compass?: boolean: 나침반의 표시 여부를 설정합니다.
• scaleBar?: boolean: 축척 막대의 표시 여부를 설정합니다.
• zoomControl?: boolean: 줌 컨트롤의 표시 여부를 설정합니다.
• mapType?: MapType: 지도의 유형을 설정합니다.
• minZoomLevel?: number: 최소 줌 레벨을 설정합니다.
• maxZoomLevel?: number: 최대 줌 레벨을 설정합니다.
• buildingHeight?: number: 건물의 높이를 설정합니다.
• nightMode?: boolean: 야간 모드의 사용 여부를 설정합니다.
• scrollGesturesEnabled?: boolean: 스크롤 제스처의 사용 여부를 설정합니다.
• zoomGesturesEnabled?: boolean: 줌 제스처의 사용 여부를 설정합니다.
• tiltGesturesEnabled?: boolean: 시야 기울기 제스처의 사용 여부를 설정합니다.
• rotateGesturesEnabled?: boolean: 회전 제스처의 사용 여부를 설정합니다.
• stopGesturesEnabled?: boolean: 중지 제스처의 사용 여부를 설정합니다.
• animateToCoordinate: (coord: Coord) => void: 특정 좌표로 애니메이션을 사용하여 이동합니다.
• animateToTwoCoordinates: (c1: Coord, c2: Coord) => void: 두 개의 좌표 사이로 애니메이션을 사용하여 이동합니다.
• animateToCoordinates: (coords: Coord[], bounds?: { top: number; bottom: number; left: number; right: number; }) => void: 여러 좌표로 애니메이션을 사용하여 이동합니다. bounds 매개변수를 사용하여 지정된 경계 내에서 이동합니다.
• animateToRegion: (region: Region) => void: 특정 영역으로 애니메이션을 사용하여 이동합니다.
• setLocationTrackingMode: (mode: number) => void: 위치 추적 모드를 설정합니다.
• setLayerGroupEnabled: (group: LayerGroup, enabled: boolean) => void: 레이어 그룹의 활성화 여부를 설정합니다.
• showsMyLocationButton: (show: boolean) => void: 내 위치 버튼의 표시 여부를 설정합니다.
• handleOnCameraChange: (event: React.SyntheticEvent<{}, { latitude: number; longitude: number; zoom: number; }>) => void: 카메라 변경 이벤트를 처리하는 핸들러 함수입니다.
• handleOnMapClick: (event: React.SyntheticEvent<{}, { x: number; y: number; latitude: number; longitude: number; }>) => void: 지도 클릭 이벤트를 처리하는 핸들러 함수입니다.

interface NaverMapViewProps {
    center?: Coord & {
        zoom?: number;
        tilt?: number;
        bearing?: number;
    };
    tilt?: number;
    bearing?: number;
    mapPadding?: Rect;
    logoMargin?: Rect;
    logoGravity?: Gravity;
    onInitialized?: Function;
    onCameraChange?: (event: {
        latitude: number;
        longitude: number;
        zoom: number;
        contentsRegion: [Coord, Coord, Coord, Coord, Coord]; // <https://navermaps.github.io/android-map-sdk/reference/com/naver/maps/map/NaverMap.html#getContentRegion()>
        coveringRegion: [Coord, Coord, Coord, Coord, Coord];
    }) => void;
    onMapClick?: (event: {
        x: number;
        y: number;
        latitude: number;
        longitude: number;
    }) => void;
    onTouch?: () => void;
    showsMyLocationButton?: boolean;
    compass?: boolean;
    scaleBar?: boolean;
    zoomControl?: boolean;
    mapType?: MapType;
    minZoomLevel?: number;
    maxZoomLevel?: number;
    buildingHeight?: number;
    nightMode?: boolean;
    scrollGesturesEnabled?: boolean;
    zoomGesturesEnabled?: boolean;
    tiltGesturesEnabled?: boolean;
    rotateGesturesEnabled?: boolean;
    stopGesturesEnabled?: boolean;
    useTextureView?: boolean; // android only
}
/// component method
animateToCoordinate: (coord: Coord) => void;
animateToTwoCoordinates: (c1: Coord, c2: Coord) => void;
animateToCoordinates: (coords: Coord[], bounds?: {
    top: number;
    bottom: number;
    left: number;
    right: number;
}) => void;
animateToRegion: (region: Region) => void;
setLocationTrackingMode: (mode: number) => void;
setLayerGroupEnabled: (group: LayerGroup, enabled: boolean) => void;
showsMyLocationButton: (show: boolean) => void;
handleOnCameraChange: (event: React.SyntheticEvent<{}, {
    latitude: number;
    longitude: number;
    zoom: number;
}>) => void;
handleOnMapClick: (event: React.SyntheticEvent<{}, {
    x: number;
    y: number;
    latitude: number;
    longitude: number;
}>) => void;
 

Marker

• coordinate (필수): 마커의 좌표를 나타내는 Coord 타입입니다.
• anchor: 마커 이미지의 앵커 좌표를 나타내는 { x: number, y: number } 타입입니다.
• pinColor: 마커의 핀 색상을 나타내는 문자열입니다.
• alpha: 마커의 투명도를 나타내는 숫자입니다.
• rotation: 마커의 회전 각도를 나타내는 숫자입니다.
• flat: 마커 이미지를 평면으로 표시할지 여부를 나타내는 부울 값입니다.
• image: 마커로 사용할 이미지를 나타내는 ImageSourcePropType 타입입니다.
• onClick: 마커를 클릭했을 때 호출될 콜백 함수입니다.
• width: 마커 이미지의 너비를 나타내는 숫자입니다.
• height: 마커 이미지의 높이를 나타내는 숫자입니다.
• angle: 마커 이미지의 회전 각도를 나타내는 숫자입니다.
• hidden: 마커를 숨길지 여부를 나타내는 부울 값입니다.
• zIndex: 마커의 쌓이는 순서를 나타내는 숫자입니다.
• iconPerspectiveEnabled: 마커 아이콘의 원근 효과 사용 여부를 나타내는 부울 값입니다.
• isHideCollidedSymbols: 충돌하는 심볼을 숨길지 여부를 나타내는 부울 값입니다.
• isHideCollidedMarkers: 충돌하는 마커를 숨길지 여부를 나타내는 부울 값입니다.
• isHideCollidedCaptions: 충돌하는 캡션을 숨길지 여부를 나타내는 부울 값입니다.
• isForceShowIcon: 아이콘을 강제로 표시할지 여부를 나타내는 부울 값입니다.
• caption: 마커에 표시될 캡션에 관련된 속성들을 정의하는 객체입니다. 속성은 다음과 같습니다:
  • text: 캡션에 표시될 텍스트입니다.
  • align: 캡션의 정렬 방법을 나타내는 Align 타입입니다.
  • textSize: 캡션의 텍스트 크기를 나타내는 숫자입니다.
  • color: 캡션의 텍스트 색상을 나타내는 숫자입니다.
  • haloColor: 캡션의 텍스트 주변에 표시될 효과 색상을 나타내는 문자열입니다.
  • offset: 캡션의 위치를 조정하기 위한 오프셋 값을 나타내는 숫자입니다.
  • requestedWidth: 캡션의 요청된 너비를 나타내는 숫자입니다.
  • minZoom: 캡션을 표시할 최소 줌 레벨을 나타내는 숫자입니다.
  • maxZoom: 캡션을 표시할 최대 줌 레벨을 나타내는 숫자입니다.
  • subCaption: 마커에 표시될 보조 캡션에 관련된 속성들을 정의하는 객체입니다. 속성은 다음과 같습니다:
    • text: 보조 캡션에 표시될 텍스트입니다.
    • textSize: 보조 캡션의 텍스트 크기를 나타내는 숫자입니다.
    • color: 보조 캡션의 텍스트 색상을 나타내는 숫자입니다.
    • haloColor: 보조 캡션의 텍스트 주변에 표시될 효과 색상을 나타내는 숫자입니다.
    • requestedWidth: 보조 캡션의 요청된 너비를 나타내는 숫자입니다.
    • minZoom: 보조 캡션을 표시할 최소 줌 레벨을 나타내는 숫자입니다.
    • maxZoom: 보조 캡션을 표시할 최대 줌 레벨을 나타내는 숫자입니다

interface MarkerProps {
  coordinate: Coord;
  anchor?: { x: number; y: number };
  pinColor?: string;
  alpha?: number;
  rotation?: number;
  flat?: boolean;
  image?: ImageSourcePropType;
  onClick?: () => void;
  width?: number;
  height?: number;
  angle?: number;
  hidden?: boolean;
  zIndex?: number;
  iconPerspectiveEnabled?: boolean;
  isHideCollidedSymbols?: boolean;
  isHideCollidedMarkers?: boolean;
  isHideCollidedCaptions?: boolean;
  isForceShowIcon?: boolean;
  caption?: {
    text?: string;
    align?: Align;
    textSize?: number;
    color?: string;
    haloColor?: string;
    offset?: number;
    requestedWidth?: number;
    minZoom?: number;
    maxZoom?: number;
  };
  subCaption?: {
    text?: string;
    textSize?: number;
    color?: number;
    haloColor?: number;
    requestedWidth?: number;
    minZoom?: number;
    maxZoom?: number;
  };
}

안드로이드 플랫폼에서 마커내 커스텀 뷰를 지원합니다. 0.0.57

<Marker coordinate={P5} width={96} height={96}>
  <View style={{ backgroundColor: "rgba(255,0,0,0.2)", borderRadius: 80 }}>
    <View
      style={{
        backgroundColor: "rgba(0,0,255,0.3)",
        borderWidth: 2,
        borderColor: "black",
        flexDirection: "row",
      }}
    >
      <Image
        source={require("./marker.png")}
        style={{
          width: 32,
          height: 32,
          backgroundColor: "rgba(0,0,0,0.2)",
          resizeMode: "stretch",
          borderWidth: 2,
          borderColor: "black",
        }}
        fadeDuration={0}
      />
      <Text>Image</Text>
    </View>
    <ImageBackground
      source={require("./marker.png")}
      style={{ width: 64, height: 64 }}
    >
      <Text>image background</Text>
    </ImageBackground>
  </View>
</Marker>

Polyline

• coordinates: Coord[]: 선의 좌표 배열을 나타냅니다.
• strokeWidth?: number: 선의 너비를 설정합니다. (선택적)
• strokeColor?: string: 선의 색상을 설정합니다. (선택적)
• onClick?: () => void: 클릭 이벤트 처리를 위한 콜백 함수를 설정합니다. (선택적)

interface PolylineProps {
  coordinates: Coord[];
  strokeWidth?: number;
  strokeColor?: string;
  onClick?: () => void;
}

Path

• coordinates: Coord[]: 경로의 좌표 배열을 나타냅니다.
• width?: number: 경로의 너비를 설정합니다. (선택적)
• color?: string: 경로의 색상을 설정합니다. (선택적)
• outlineWidth?: number: 경로의 외곽선 너비를 설정합니다. (선택적)
• passedColor?: string: 경로의 통과된 부분의 색상을 설정합니다. (선택적)
• outlineColor?: string: 경로의 외곽선 색상을 설정합니다. (선택적)
• passedOutlineColor?: string: 경로의 통과된 부분의 외곽선 색상을 설정합니다. (선택적)
• pattern?: ImageSourcePropType: 경로에 사용할 패턴 이미지를 설정합니다. (선택적)
• patternInterval?: number: 패턴 이미지의 간격을 설정합니다. (선택적)
• onClick?: () => void: 클릭 이벤트 처리를 위한 콜백 함수를 설정합니다. (선택적)

interface PathProps {
  coordinates: Coord[];
  width?: number;
  color?: string;
  outlineWidth?: number;
  passedColor?: string;
  outlineColor?: string;
  passedOutlineColor?: string;
  pattern?: ImageSourcePropType;
  patternInterval?: number;
  onClick?: () => void;
}

Circle

• coordinate: Coord[]: 원의 중심 좌표를 나타내는 배열입니다.
• radius?: number: 원의 반지름을 설정합니다. (선택적)
• color?: string: 원의 색상을 설정합니다. (선택적)
• outlineWidth?: number: 원의 외곽선 너비를 설정합니다. (선택적)
• outlineColor?: string: 원의 외곽선 색상을 설정합니다. (선택적)
• zIndex?: number: 원의 Z 인덱스를 설정합니다. (선택적)
• onClick?: () => void: 클릭 이벤트 처리를 위한 콜백 함수를 설정합니다. (선택적)

export interface CircleProps {
  coordinate: Coord[];
  radius?: number;
  color?: string;
  outlineWidth?: number;
  outlineColor?: string;
  zIndex?: number;
  onClick?: () => void;
}

Polygon

• coordinate: Coord[]: 다각형의 좌표를 나타내는 배열입니다.
• outlineWidth?: number: 다각형의 외곽선 너비를 설정합니다. (선택적)
• outlineColor?: string: 다각형의 외곽선 색상을 설정합니다. (선택적)
• color?: string: 다각형의 색상을 설정합니다. (선택적)
• holes?: Coord[][]: 다각형 내부에 있는 구멍의 좌표를 나타내는 배열입니다. (선택적)
• onClick?: () => void: 클릭 이벤트 처리를 위한 콜백 함수를 설정합니다. (선택적)

export interface PolygonProps {
  coordinate: Coord[];
  outlineWidth?: number;
  outlineColor?: string;
  color?: string;
  holes?: Coord[][];
  onClick?: () => void;
}

LayerGroup

• LAYER_GROUP_BUILDING = "building": 건물 레이어 그룹을 나타내는 상수입니다.
• LAYER_GROUP_TRANSIT = "transit": 대중교통 레이어 그룹을 나타내는 상수입니다.
• LAYER_GROUP_BICYCLE = "bike": 자전거 레이어 그룹을 나타내는 상수입니다.
• LAYER_GROUP_TRAFFIC = "ctt": 교통 정보 레이어 그룹을 나타내는 상수입니다.
• LAYER_GROUP_CADASTRAL = "landparcel": 토지 매핑 레이어 그룹을 나타내는 상수입니다.
• LAYER_GROUP_MOUNTAIN = "mountain": 산 레이어 그룹을 나타내는 상수입니다.

export declare enum LayerGroup {
  LAYER_GROUP_BUILDING = "building",
  LAYER_GROUP_TRANSIT = "transit",
  LAYER_GROUP_BICYCLE = "bike",
  LAYER_GROUP_TRAFFIC = "ctt",
  LAYER_GROUP_CADASTRAL = "landparcel",
  LAYER_GROUP_MOUNTAIN = "mountain",
}

참고

• react-navigation의 스택 스크린 사용시 안드로이드에서 맵뷰가 겹쳐 보이는 현상이 있을 경우 useTextureView 옵션을 추가해 주세요.
• 안드로이드에서 ScrollView 내부에 추가할 경우 scrollGesturesEnabled를 이용해 맵 스크롤을 제어할 수 있습니다.
• 마커 클러스터링에 필요한 지도 컨텐츠 영역은 onCameraChange 이벤트를 통해 얻을 수 있습니다.