react-native-daummap

Content

Installation
Usage
- Daum Map
- Local Map API

iOS	Android

Installation

1. Download

npm i -S react-native-daummap

2. Plugin Installation

Mostly automatic installation

react-native link react-native-daummap

Manual installation

iOS

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-daummap and add DaumMap.xcodeproj
In XCode, in the project navigator, select your project. Add libDaumMap.a to your project's Build Phases ➜ Link Binary With Libraries
Select your project → Build Settings → Search Paths → Header Search Paths to add: $(SRCROOT)/../node_modules/react-native-daummap/ios/DaumMap
Select your project → "General" or "Build Phases" → Link Binary With Libraries에 아래 항목 추가
- OpenGLES.framework
- SystemConfigure.framework
- CoreLocation.framework
- QuartzCore.framework
- libstdc++.6.dylib (libc++.tbd in XCode 10)
- libxml2.dylib (libxml2.tbd in Xcode 10)
- libsqlite3.dylib (libsqlite3.tbd in Xcode 10)

Android

In your android/settings.gradle file, make the following additions:

include ':react-native-daummap'   
project(':react-native-daummap').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-daummap/android/app')

In your android/app/build.gradle file, add the :react-native-splash-screen project as a compile-time dependency:
```
...
dependencies {
    ...
    compile project(':react-native-daummap')
}
```

Update the MainApplication.java file to use react-native-splash-screen via the following changes:

...
import com.teamsf.daummap.DaumMapPackage;
...

public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        ...

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new DaumMapPackage()
            );
        }

        ...
    }
}

3. 다음 지도 SDK 추가

iOS

다음 지도 SDK 다운로드
XCode Project navigator에서 Frameworks 폴더를 마우스 오른쪽 버튼으로 클릭 후 "Add Files to [your project's name]" 선택
다운로드 받은 SDK 폴더로 이동해 libs폴더 안에 있는 DaumMap.embeddedframework 폴더에서 DaumMap.framework 파일 선택, 아래 "Copy items if needed"와 "Add to targets"를 선택 후 Add
XCode에서 프로젝트 이름을 선택 후 General - Linked Frameworks and Libraries에 3번에서 추가한 DaumMap.framework를 추가

Android

별도 작업 없음

4. 네이티브 앱 키 발급 및 Bundle ID, 키 해시 등록

Kakao Developer에서 애플리케이션을 등록
등록한 애플리케이션을 선택 후 설정 - 일반으로 이동
플랫폼(iOS, Android) 추가

iOS

번들 ID에 개발 앱 번들 ID 등록 후 저장
상단에 있는 "네이티브 앱 키"를 복사

Info.plist에 KAKAO_APP_KEY 추가

<dict>
    ...
    <key>KAKAO_APP_KEY</key>
    <string>발급 받은 APP KEY</string>
    ...
</dict>

트래킹 모드, 나침반 모드 기능 사용시 Info.plist에 아래 내용 추가

<dict>
    ...
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>권한 이용 설명 기재</string>
    ...
</dict>

프로젝트 선택 → Build Settings에서 아래 항목 수정
- Objective-C Automatic Reference Counting : No 선택

Android

패키지명에 개발 앱 패키지명 추가

키 해시는 터미널에서 아래 명령 수행한 결과 값 입력

keytool -exportcert -alias androiddebugkey -keystore [keystore_path] -storepass android -keypass android | openssl sha1 -binary | openssl base64

Debug일 경우 Keystore 경로는 ~/.android/debug.keystore에 저장되며 비밀번호는 android

상단에 있는 "네이티브 앱 키"를 복사

AndroidManifest.xml에 Permission 과 APP KEY 추가

<uses-permission android:name="android.permission.INTERNET" />

<application>
    ...
    <meta-data android:name="com.kakao.sdk.AppKey" android:value="발급 받은 APP KEY"/>
    ...
</application>

Usage

Daum Map

import MapView from 'react-native-daummap';

<MapView
    initialRegion={{
        latitude: 36.143099,
        longitude: 128.392905,
        zoomLevel: 5,
    }}
    mapType={"Standard"}
    style={{ width: 300, height: 300, }}
/>

Properties

Property	Type	Default	Description
initialRegion	Object	{}	지도 초기 화면 좌표 및 확대/축소 레벨
style		{}	지도 View Style
mapType	String	Standard	지도 종류 (기본 지도 - Standard, 위성 지도 - Satellite, 하이브리드 지도 - Hybrid)
markers	Array	[]	지도 위에 추가되는 마커 정보
region	Object	{}	지도 중심점 좌표, 지도 이동시 사용
polyLines	Object	{}	정해진 좌표로 선을 그림
circles	Array	[]	지정한 좌표에 원을 그림
isTracking	Bool	false	현위치 트래킹 모드 (지도화면 중심을 단말의 현재 위치로 이동)
isCompass	Bool	false	나침반 모드 (단말의 방향에 따라 지도화면이 회전), 트래킹 모드를 활성화 시켜야 사용 가능
isCurrentMarker	Bool	false	현 위치를 표시하는 마커 표시 여부, 트래킹 모드 활성화시 true
permissionDeniedView	Component	null	(Android) 위치 권한이 없을 경우 표시될 View
permissionsAndroidTitle	String		(Android) 위치 권한 요청시 Alert창 제목
permissionsAndroidMessage	String		(Android) 위치 권한 요청시 Alert창 본문
onRegionChange	Function		지도 이동시 변경되는 좌표값 반환
onMarkerSelect	Function		마커 핀을 선택한 경우
onMarkerPress	Function		마커 위 말풍선을 선택한 경우
onMarkerMoved	Function		마커를 이동시킨 경우
onUpdateCurrentLocation	Function		트래킹 모드 사용중 좌표가 변경된 경우
onUpdateCurrentHeading	Function		나침반 모드 사용시 방향 각도 값이 변경된 경우

initialRegion

Property	Type	Default	Description
latitude	Number	36.143099	위도 좌표값
longitude	Number	128.392905	경도 좌표값
zoomLevel	Number	2	확대/축소 레벨 (-2~12, 값이 클수록 더 넓은 영역이 보임)

markers

Property	Type	Default	Description
latitude	Number	36.143099	위도 좌표값
longitude	Number	128.392905	경도 좌표값
title	String		마커 이름, 마커 선택시 표시
pinColor	String	blue	마커 핀 색상 (blue, yellow, red, image)
markerImage	String		마커 사용자 이미지
pinColorSelect	String	red	선택된 마커 핀 색상 (blue, yellow, red, image)
markerImageSelect	String		선택된 마커 사용자 이미지
draggable	Bool	false	마커 이동 여부

사용자 이미지는 추가 위치
- Android : android/app/src/main/res/drawable
- iOS : Xcode Project에 추가

region

Property	Type	Default	Description
latitude	Number		위도 좌표값
longitude	Number		경도 좌표값

polyLines

Property	Type	Description
tag	Number	고유 IDX 값
color	String	선 색상 (blue, yellow, red, white, black, green)
points	Array	위경도 좌표값 배열 {latitude: ??, longitude: ??}

circles

Property	Type	Default	Description
latitude	Number	36.143099	위도 좌표값
longitude	Number	128.392905	경도 좌표값
lineColor	String		원 테두리 색상 (blue, yellow, red, white, black, green)
fillColor	String		원 내부 색상 (blue, yellow, red, white, black, green)
lineWidth	Number	10	원 테두리 굵기
radius	Number	50	원 반지름 (단위 : m)

Local RestAPI

import DaumMap from 'react-native-daummap';

componentDidMount () {
	DaumMap.setRestApiKey("********************************");
}


functionName () {
    DaumMap.serachAddress("양호동")
	.then((responseJson) => {
        // API 결과값 반환
		console.log(responseJson);
	}).catch((error) => {
        // API 호출 중 오류 발생시
		console.log(error);
	});
}

기능

기능명	Function Name	URL
Rest API Key 설정	setRestApiKey
주소 검색	serachAddress	https://developers.kakao.com/docs/restapi/local#주소-검색
좌표 → 행정구역정보 변환	getCoordToRegionArea	https://developers.kakao.com/docs/restapi/local#좌표-행정구역정보-변환
좌표 → 주소 변환	getCoordToAddress	https://developers.kakao.com/docs/restapi/local#좌표-주소-변환
좌표계 변환	transCoord	https://developers.kakao.com/docs/restapi/local#좌표계-변환
키워드로 장소 검색	searchKeyword	https://developers.kakao.com/docs/restapi/local#키워드로-장소-검색
카테고리로 장소 검색	searchCategory	https://developers.kakao.com/docs/restapi/local#카테고리로-장소-검색

API Key는 "네이티브 앱 키"가 아닌 "REST API 키"입니다.
- 네이티브 앱 키 사용시 에러가 발생합니다.
각 API 호출 반환값은 Daum API 문서를 참고 해 주세요.

각 함수 설명

Rest API Key 설정 (setRestApiKey)
- RestAPI Key 설정
- Parameter : API Key(필수)
- Example : setRestApiKey(API_Key)
주소 검색 (serachAddress)
- 주소를 지도 위에 정확하게 표시하기 위해 해당 주소의 좌표 정보를 제공
- Parameter : 검색어(필수), 결과 페이지 번호(선택, 기본값 : 1), 한 페이지에 보여질 문서의 개수(선택, 기본값 : 10)
- Example : serachAddress("양호동", 1, 10) or serachAddress("양호동")
좌표 → 행정구역정보 변환 (getCoordToRegionArea)
- 해당 좌표에 부합되는 행정동, 법정동을 얻는 API
- Parameter : 위도(필수), 경도(필수), 입력되는 값에 대한 좌표 체계(선택, 기본값 : WGS84), 결과에 출력될 좌표 체계(선택, 기본값 : WGS84), 결과 언어(선택, 기본값 : ko)
- Example : getCoordToRegionArea(36.143099, 128.392905, "WGS84", "WGS84", "ko") or getCoordToRegionArea(36.143099, 128.392905)
좌표 → 주소 변환 (getCoordToRegionArea)
- 해당 좌표의 구주소와 도로명 주소 정보를 표출하는 API
- Parameter : 위도(필수), 경도(필수), 입력되는 값에 대한 좌표 체계(선택, 기본값 : WGS84)
- Example : getCoordToAddress(36.143099, 128.392905, "WGS84") or getCoordToAddress(36.143099, 128.392905)
좌표계 변환 (transCoord)
- x, y 값과 입력/출력 좌표계를 지정하여 변환된 좌표값
- Parameter : 위도(필수), 경도(필수), 입력되는 값에 대한 좌표 체계(선택, 기본값 : WGS84), 결과에 출력될 좌표 체계(선택, 기본값 : WGS84)
- Example : transCoord(36.143099, 128.392905, "WGS84", "WGS84") or transCoord(36.143099, 128.392905)
키워드로 장소 검색 (searchKeyword)
- 질의어에 매칭된 장소 검색 결과를 지정된 정렬 기준에 따라 제공
- Parameter : 검색어(필수), 카테고리 그룹 코드(선택, 기본값 : ""), 위도(선택), 경도(선택), 중심 좌표부터의 반경거리(선택, 기본값 : 500, 단위 : m, 0~~20000), 결과 페이지 번호(선택, 기본값 : 1, 1~~45), 한 페이지에 보여질 문서의 개수(선택, 기본값 : 15, 1~15), 결과 정렬 순서(선택, 기본값 : accuracy)
- 카테고리 그룹 코드는 Daum API 문서 참고
- Example : searchKeyword("편의점", "CS2", 36.143099, 128.392905, 100, 1, 10, "accuracy") or searchKeyword("편의점")
카테고리로 장소 검색 (searchCategory)
- 미리 정의된 그룹코드에 해당하는 장소 검색 결과를 지정된 정렬 기준에 따라 제공
- Parameter : 카테고리 그룹 코드(필수), 위도(필수), 경도(필수), 중심 좌표부터의 반경거리(필수, 기본값 : 500, 단위 : m, 0~~20000), 결과 페이지 번호(선택, 기본값 : 1, 1~~45), 한 페이지에 보여질 문서의 개수(선택, 기본값 : 15, 1~15), 결과 정렬 순서(선택, 기본값 : accuracy)
- 카테고리 그룹 코드는 Daum API 문서 참고
- Example : searchCategory("CS2", 36.143099, 128.392905, 100, 1, 10, "accuracy") or searchCategory("CS2", 36.143099, 128.392905, 100)

@cotdp/react-native-daummap

react-native-daummap

Content

Installation

1. Download

2. Plugin Installation

Mostly automatic installation

Manual installation

iOS

Android

3. 다음 지도 SDK 추가

iOS

Android

4. 네이티브 앱 키 발급 및 Bundle ID, 키 해시 등록

iOS

Android

Usage

Daum Map

Properties

initialRegion

markers

region

polyLines

circles

Local RestAPI

기능

각 함수 설명

License

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads