Skip to content

scalardata-co-ltd/react-native-naver-map

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

react-native-naver-map npm version

๋„ค์ด๋ฒ„๋งต์˜ ๋ฆฌ์•กํŠธ ๋„ค์ดํ‹ฐ๋ธŒ ๋ธŒ๋ฆฟ์ง€์ž…๋‹ˆ๋‹ค.

์„ค์น˜

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 ํŒŒ์ผ์— ์•„๋ž˜์™€ ๊ฐ™์ด ๋ ˆํฌ์ง€ํ„ฐ๋ฆฌ๋ฅผ ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค

โš ๏ธ ์‹ ๊ทœ ์ €์žฅ์†Œ๋กœ ์ˆ˜์ •๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

allprojects {
    repositories {
        google()
        jcenter()
        // ๋„ค์ด๋ฒ„ ์ง€๋„ ์ €์žฅ์†Œ
        maven {
            url 'https://repository.map.naver.com/archive/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์— ์•„๋ž˜์™€ ๊ฐ™์ด ๋ฐœ๊ธ‰๋ฐ›์€ ํด๋ผ์ด์–ธํŠธ ์•„์ด๋””๋ฅผ ์ถ”๊ฐ€ํ•ด์ค๋‹ˆ๋‹ค.

image

<?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>

์˜ˆ์ œ

example/App.js

import NaverMapView, {
  Circle,
  Marker,
  Path,
  Polyline,
  Polygon,
  Coord,
} from "react-native-nmap";

function MyMap() {
  const P0 = { latitude: 37.564362, longitude: 126.977011 };
  const P1 = { latitude: 37.565051, longitude: 126.978567 };
  const P2 = { latitude: 37.565383, longitude: 126.976292 };

  // ์•„๋ž˜๋Š” getPointLatLng ์‚ฌ์šฉ์„ ์œ„ํ•ด ์ถ”๊ฐ€๋œ ์˜ˆ์ œ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.
  const getScreenLatLng = async (location: Coord) => {
    const {
      bottomLeftCoord,
      bottomRightCoord,
      topLeftCoord,
      topRightCoord,
    } = await nMapRef.current.getPointLatLng({
      center: location,
      screen: {
        width: 50,
        height: 50,
      },
    });
    console.log(bottomLeftCoord, bottomRightCoord, topLeftCoord, topRightCoord);
  };

  return (
    <NaverMapView
      style={{ width: "100%", height: "100%" }}
      showsMyLocationButton={true}
      center={{ ...P0, zoom: 16 }}
      onMove={(e) => console.warn("onMove", JSON.stringify(e.nativeEvent))}
      onCameraChange={(e) => console.warn("onCameraChange", JSON.stringify(e))}
      onMapClick={(e) => console.warn("onMapClick", JSON.stringify(e))}
    >
      <Marker coordinate={P0} onClick={() => console.warn("onClick! p0")} />
      <Marker
        coordinate={P1}
        pinColor="blue"
        onClick={async () => {
          console.warn("onClick! p1");
          await getScreenLatLng(P1);
        }}
      />
      <Marker
        coordinate={P2}
        pinColor="red"
        onClick={() => console.warn("onClick! p2")}
      />
      <Path
        coordinates={[P0, P1]}
        onClick={() => console.warn("onClick! path")}
        width={10}
      />
      <Polyline
        coordinates={[P1, P2]}
        onClick={() => console.warn("onClick! polyline")}
      />
      <Circle
        coordinate={P0}
        color={"rgba(255,0,0,0.3)"}
        radius={200}
        onClick={() => console.warn("onClick! circle")}
      />
      <Polygon
        coordinates={[P0, P1, P2]}
        color={`rgba(0, 0, 0, 0.5)`}
        onClick={() => console.warn("onClick! polygon")}
      />
    </NaverMapView>
  );
}

์ปดํฌ๋„ŒํŠธ

ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ํƒ€์ž… ์ •์˜๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์–ด ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‚ฌ์šฉ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ํƒ€์ž…

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

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;
    onMove?: (event:{
        nativeEvent:{
            reason:number,
            animated:boolean
        }
    }) => void;
    showsMyLocationButton?: boolean;
    compass?: boolean;
    scaleBar?: boolean;
    zoomControl?: boolean;
    mapType?: MapType;
    minZoomLevel?: number;
    maxZoomLevel?: number;
    symbolScale?: number; // 0 ~ 2 ๊นŒ์ง€๋งŒ ๊ฐ€๋Šฅ
    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

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

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

Path

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

Circle

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

Polygon

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

LayerGroup

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",
}

getScreenLatLng

export interface PointType {
  center: Coord;
  screen: {
    width: number;
    height: number;
  };
}

์ฐธ๊ณ 

  • react-navigation์˜ ์Šคํƒ ์Šคํฌ๋ฆฐ ์‚ฌ์šฉ์‹œ ์•ˆ๋“œ๋กœ์ด๋“œ์—์„œ ๋งต๋ทฐ๊ฐ€ ๊ฒน์ณ ๋ณด์ด๋Š” ํ˜„์ƒ์ด ์žˆ์„ ๊ฒฝ์šฐ useTextureView ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•ด ์ฃผ์„ธ์š”. #27

  • ์•ˆ๋“œ๋กœ์ด๋“œ์—์„œ ScrollView ๋‚ด๋ถ€์— ์ถ”๊ฐ€ํ•  ๊ฒฝ์šฐ scrollGesturesEnabled๋ฅผ ์ด์šฉํ•ด ๋งต ์Šคํฌ๋กค์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. #62

  • ๋งˆ์ปค ํด๋Ÿฌ์Šคํ„ฐ๋ง์— ํ•„์š”ํ•œ ์ง€๋„ ์ปจํ…์ธ  ์˜์—ญ์€ onCameraChange ์ด๋ฒคํŠธ๋ฅผ ํ†ตํ•ด ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. #64

About

๐Ÿ—บ๏ธnaver map for react-native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 50.4%
  • Objective-C 28.6%
  • JavaScript 12.0%
  • TypeScript 6.2%
  • Ruby 1.8%
  • Starlark 1.0%