@actbase/react-native-kakao-navi

카카오내비 for React Native

Guide Index

• 목적지 공유하기
• 목적지 길안내

기본설정

기본설정 부분은 KakaoSDK 시작하기(React-Native)를 참고해서 설정하시면 됩니다.

dependencies로 되어있어서 같이 설치가 됩니다.

궁금한 사항이 있는경우 카카오톡 오픈채팅 React & React-Native에서 물어보면 많은 분들이 답변해주십니다.

작업하시다가 외주 혹은 작업할 업체가 필요하면 [e-mail]로 메일 주시면 친절하게 안내해드립니다.

Getting started

Mostly automatic installation (RN >= 0.60)

$ npm install @actbase/react-native-kakaosdk @actbase/react-native-kakao-navi --save
$ cd ios && pod install && cd ..

Mostly automatic installation (RN <= 0.59)

$ npm install @actbase/react-native-kakaosdk @actbase/react-native-kakao-navi --save
$ react-native link @actbase/react-native-kakaosdk @actbase/react-native-kakao-navi
$ cd ios && pod install && cd ..

iOS

iOS에서는 Location에 대한 권한 동의 plist를 작성해주셔야 합니다.

카카오내비

Location

카카오내비 API에서 지도상의 특정 위치를 정의하는 class. 목적지 또는 경유지로 사용됩니다. 좌표계는 CoordType.KATEC, CoordType.WGS84가 사용되며 기본 값은 CoordType.KATEC입니다. CoordType.WGS84 좌표계를 사용하려면 RpOptions객체를 활용하여 coordType을 CoordType.WGS84로 지정해야 합니다.

Name	Type	Description	Default	Usage
name	string	장소 이름 (필수)		공유/길안내
x	number	장소 x (경도, 필수)		공유/길안내
y	number	장소 y (위도, 필수)		공유/길안내

const destination: ARNKakaoNaviLocation = {
  name: "카카오판교오피스",
  x: 321286,
  y: 533707
};

Options

카카오내비 API의 선택 파라미터들을 정의하는 Object. 이 클래스가 포함하는 모든 파라미터들은 선택적입니다. 목적지 공유에는 coordType만 쓰이고 나머지 파라미터들은 목적지 길안내에 쓰입니다.

Name	Type	Description	Default	Usage
coordType	CoordType	좌표 타입	CoordType.KATEC	공유/길안내
vehicleType	VehicleType	차종	VehicleType.First	길안내
rpoption	RpOption	경로 옵션	RpOption.Fast	길안내
routeInfo	boolean	전체경로보기 여부	false	길안내
startX	number	시작좌표 X		길안내
startY	number	시작좌표 Y		길안내
startAngle	number	시작 앵글 (0~359).	-1	길안내
userId	string	길안내 유저 구분을 위한 USER ID (현재 택시에서 사용)		길안내
returnUri	string	길안내 종료(전체 경로보기시 종료) 후 호출 될 URI		길안내

const options: ARNKakaoNaviOptions = {
  coordType: CoordType.WGS84,
  vehicleType: VehicleType.Second,
  rpoption: RpOption.HighWay,
  routeInfo: false,
  startX: 321286,
  startY: 533707,
  startAngle: 0,
  userId: "asdf",
  returnUri: "localhost"
};

ViaList

Type	Description	Default	Usage
Location[]	경유지 설정 (최대 3개)	[]	공유/길안내

const viaList: ARNKakaoNaviViaList = [
  {
    name: "카카오판교오피스",
    x: 321286,
    y: 533707
  },
  {
    name: "카카오판교오피스",
    x: 321286,
    y: 533707
  },
  {
    name: "카카오판교오피스",
    x: 321286,
    y: 533707
  }
];

CoordType

Name	Value	Description
KATEC	1	Katec 좌표계
WGS84	2	World Geodetic System 84 좌표계

VehicleType

Name	Value	Description
First	1	1종 (승용차/소형승합차/소형화물화)
Second	2	2종 (중형승합차/중형화물차)
Third	3	3종 (대형승합차/2축 대형화물차)
Fourth	4	4종 (3축 대형화물차)
Fifth	5	5종 (4축이상 특수화물차)
Sixth	6	6종 (경차)
TwoWheel	7	이륜차

RpOption

Name	Value	Description
Fast	1	빠른길
Free	2	무료도로
Shortest	3	최단거리
NoAuto	4	자동차전용제외
Wide	5	큰길우선
HighWay	6	고속도로우선
Normal	7	일반도로우선

목적지 공유

KakaoSDK.Navi
  .share(destination, options, viaList)
  .then(res => console.log(res))
  .catch(e => console.log(e));

다음은 SDK를 통하여 목적지를 공유하였을 때 실행되는 카카오내비 화면입니다.

목적지 길안내

KakaoSDK.Navi
  .navigate(destination, options, viaList)
  .then(res => console.log(res))
  .catch(e => console.log(e));

다음은 SDK를 통하여 길안내를 실행하였을 때 안내가 시작된 화면입니다.