3. 이벤트 구성 및 연결하기

API연동에 추가한 distancematrix모듈을 이벤트로 구성하여 검색버튼에 연결하도록 하겠습니다.

개발하기

API 연동에 추가한 API를 시나리오에서 호출하려면 이벤트로 구성해야 합니다. 이를 위해 이벤트로 구성하여 검색 버튼에 이벤트를 연결하겠습니다.

이벤트 구성하기

이벤트를 추가하여 명칭을 "getDistanceTime"로 변경하여 생성합니다.

이벤트에 API연동을 추가합니다. 시스템명은 API의 명칭이고 모듈명은 해당 API 하위에 있는 모듈들의 명칭입니다. 시스템은 "GoogleMap"을 선택하고 모듈은 "distancematrix"을 선택합니다.

해당 모듈에서 사용하는 Event Config Key로는 units; mode; origins; destinations; region; key; 가 있습니다.

units: 거리 측정 단위를 지정합니다.

metric: 거리를 킬로미터와 미터 단위로 표시합니다.
imperial: 거리를 마일과 피트 단위로 표시합니다.

mode: 이동 수단을 지정합니다. (국가에 따라 이동수단 종류에 제한이 있을 수 있습니다.)

driving: 자동차를 이용한 이동.
walking: 도보 이동.
bicycling: 자전거 이동.
transit: 대중교통 이용.

origins: 출발지를 지정합니다. 주소, 지명, 위도/경도 좌표 등을 사용할 수 있습니다.

destinations: 목적지를 지정합니다. 출발지와 마찬가지로 주소, 지명, 위도/경도 좌표 등을 사용할 수 있습니다.

region: 특정 지역의 결과를 우선적으로 받기 위해 지정합니다. 이는 주소 해석에 영향을 미치며, ISO 3166-1 알파-2 국가 코드 형식으로 지정됩니다.

key: [심화실습]-[목적지 경로 거리 및 시간 Google Map]에서 발급받은 API 키를 지정합니다.

API연동 호출에 사용자가 입력한 값을 활용하기 위해서는 시작지점과 도착지점의 입력 값을 origins와 destinations 필드에 포함시켜야 합니다. 이를 위해 대체 텍스트를 사용하여 입력 값들을 해당 필드에 동적으로 할당합니다. placeInput 영역에는 검색 버튼이 배치되어 있으며, 이 버튼을 클릭하면 해당 영역의 섹터가 activeSector로 활성화됩니다. 이렇게 설정하면 검색 버튼 클릭 시 서비스 호출에 필요한 입력 값들을 효과적으로 수집할 수 있습니다.

origins

{% return _c.inputPlace.activeSector.origins %}

destinations

{% return _c.inputPlace.activeSector.destinations %}

보내는 카테고리는 입력한 주소가 있는 ‘inputPlace’ 를 입력하고 받은 데이터 카테고리는 ‘searchResult’ 카테고리를 덮어쓰기로 하여 등록해주도록 합니다.

결과로 받은 searchResult는 searchResult 영역에만 영향을 주게됩니다. searchResult 영역에만 반영해주기 위해 searchResult 영역의 상위 그룹인 Group1를 reload() 시켜주는 스크립트를 추가해야 합니다. 이를 위해 먼저 해당 그룹의 fId를 복사하도록 합니다.

fId는 컴포넌트 생성 시점에 따라 다르게 됩니다. 실습 이미지의 값이 아닌 시나리오에서 복사해서 사용해야합니다. 자세한 설명은 [개발모드]-[컴포넌트]-[컴포넌트 동적 활용(컴포넌트 아이디)] 를 참조해주세요.