Skip to content

toy0605/react-native-daummap

BranchesTags
 
 

Repository files navigation

react-native-daummap

NPM

Content

iOS Android
iOS ScreenShot Android ScreenShot

Installation

1. Download

npm i -S react-native-daummap

2. Plugin Installation

Mostly automatic installation

react-native link react-native-daummap

Manual installation

iOS

  1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
  2. Go to node_modules ➜ react-native-daummap and add DaumMap.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libDaumMap.a to your project's Build Phases ➜ Link Binary With Libraries
  4. Select your project → Build Settings → Search Paths → Header Search Paths to add: $(SRCROOT)/../node_modules/react-native-daummap/ios/DaumMap
  5. 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

  1. 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')

  1. 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')
}

  2. 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

  1. 다음 지도 SDK 다운로드

  2. XCode Project navigator에서 Frameworks 폴더를 마우스 오른쪽 버튼으로 클릭 후 "Add Files to [your project's name]" 선택

  3. 다운로드 받은 SDK 폴더로 이동해 libs폴더 안에 있는 DaumMap.embeddedframework 폴더에서 DaumMap.framework 파일 선택, 아래 "Copy items if needed"와 "Add to targets"를 선택 후 Add

    xcodeaddframework

  4. XCode에서 프로젝트 이름을 선택 후 General - Linked Frameworks and Libraries에 3번에서 추가한 DaumMap.framework를 추가

    DaumMap.framework Add

Android

  • 별도 작업 없음

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

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

iOS

  1. 번들 ID에 개발 앱 번들 ID 등록 후 저장

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

  3. Info.plist에 KAKAO_APP_KEY 추가

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

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

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

  5. 프로젝트 선택 → Build Settings에서 아래 항목 수정

    • Objective-C Automatic Reference Counting : No 선택

Android

  1. 패키지명에 개발 앱 패키지명 추가
  2. 키 해시는 터미널에서 아래 명령 수행한 결과 값 입력 
    keytool -exportcert -alias androiddebugkey -keystore [keystore_path] -storepass android -keypass android | openssl sha1 -binary | openssl base64
  • Debug일 경우 Keystore 경로는 ~/.android/debug.keystore에 저장되며 비밀번호는 android
  1. 상단에 있는 "네이티브 앱 키"를 복사
  2. 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 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, 020000), 결과 페이지 번호(선택, 기본값 : 1, 145), 한 페이지에 보여질 문서의 개수(선택, 기본값 : 15, 1~15), 결과 정렬 순서(선택, 기본값 : accuracy)
    • 카테고리 그룹 코드는 Daum API 문서 참고
    • Example : searchKeyword("편의점", "CS2", 36.143099, 128.392905, 100, 1, 10, "accuracy") or searchKeyword("편의점")

  • 카테고리로 장소 검색 (searchCategory)

    • 미리 정의된 그룹코드에 해당하는 장소 검색 결과를 지정된 정렬 기준에 따라 제공
    • Parameter : 카테고리 그룹 코드(필수), 위도(필수), 경도(필수), 중심 좌표부터의 반경거리(필수, 기본값 : 500, 단위 : m, 020000), 결과 페이지 번호(선택, 기본값 : 1, 145), 한 페이지에 보여질 문서의 개수(선택, 기본값 : 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)

License

MIT © Cory Asata 2018

About

react-native용 Daum 지도

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

11 tags

Packages

No packages published

Languages

  • Objective-C 70.7%
  • Java 18.0%
  • JavaScript 10.5%
  • Ruby 0.8%