@luckfellow/react-native-daummap

v0.5.4

Published

2 years ago

react-native use daum map

Downloads

0High
0Medium
0Low

luckfellow

map daum kakao react-naive daum map

react-native-daummap

Content

| 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

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 | Default | 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)

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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