react-native-n-maps
Naver maps module for React-Native.
It supports Android, iOS platform.
Install
npm install react-native-n-maps --save;
$ react-native link react-native-n-maps
$ cd ios/ && pod install
안드로이드 추가 설정
네이버 맵 안드로이드 SDK 문서를 따라 API키와 레포지터리 경로를 추가합니다
/android/build.gradle
파일에 아래와 같이 레포지터리를 추가합니다
allprojects {
repositories {
google()
jcenter()
//Naver Maps resource repo
maven {
url 'https://navercorp.bintray.com/maps'
}
}
}
/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키와 레포지터리 경로를 추가합니다.
(Pod NMapsMap 라이브러리 추가시 git-lfs 설치후 진행해야 합니다. 하기 참조.)
$ brew install git-lfs
$ cd ~/${project_parh}
$ git-lfs install
$ pod cache clean NMapsMap
$ pod update NMapsMap
info.plist
에 아래와 같이 발급받은 클라이언트 아이디를 추가해줍니다.
<?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>
Components
NaverMapView
interface NaverMapViewProps {
style?: StyleProp<ViewStyle>,
center?: Coord & { zoom?: number, tilt?: number, bearing?: number },
tilt?: number,
bearing?: number,
mapPadding?: { left: number, top: number, right: number, bottom: number },
onMapClick?: (event: {
latitude: number,
longitude: number,
}) => void,
onInitialized?: Function,
onCameraChange?: (event: {
latitude: number,
longitude: number,
zoom: number,
}) => void,
showsMyLocationButton?: boolean,
compass?: boolean,
scaleBar?: boolean,
zoomControl?: boolean,
mapType?: number,
buildingHeight?: number,
nightMode?: boolean,
}
Marker
interface MarkerProps {
tag: number
coordinate: Coord
anchor?: { x: number, y: number }
pinColor?: string
rotation?: number
flat?: boolean
image?: ImageSourcePropType
onClick?: (event: {
tag: number
}) => void,
}
Polyline
interface PolylineProps {
coordinates: Coord[]
strokeWidth?: number
strokeColor?: string
}
Path
interface PathProps {
coordinates: Coord[]
width?: number
color?: string
outlineWidth?: number
passedColor?: string
outlineColor?: string
passedOutlineColor?: string
pattern?: ImageSourcePropType
patternInterval?: number
}
Example
<NaverMapView
style={styles.map}
showsMyLocationButton={true}
center={{
latitude: 37.5668260054857,
longitude: 126.978656785931,
}}
onMapClick={(event) => { console.log(event) }}
onTouch={(event) => { console.log(event) }}
nightMode={false}
ref={(ref) => {this.naverMapView = ref}}>
{this.state.markerData.map((marker, index) => {
return (
<Marker
key={index}
coordinate={{
latitude: 37.5668260054857,
longitude: 126.978656785931,
}}
caption={'caption'}
image={require('./images/map_marker.png')}
onClick={() => { console.log("onMarkerClick", index) }} />
)
})}
</NaverMapView>
Release Note
1.0.6 - 2020/02/28 - Add onClick() event for Marker (Android/iOS)
1.0.8 - 2020/03/03 - Add onMapClick() event for Map (Android/iOS)
추가 개발 및 수정요청
ObangGopro / bibichoo@nate.com