한빛출판네트워크

제공 : 한빛 네트워크
저자 : Andrew Trice
역자 : 명경석
원문 : Making Components Work Together

이번 기사는 Flash/Flex 애플리케이션에 Flaxh 컴포넌트를 임베디드하지 못하는 상황에 있는 사람들에게 도움이 될 것이다. 물론 그들은 둘을 함께 사용하고 싶어하고 그럴 필요성도 있다.

이번 예제에서는 구글 맵스 API를 사용하는 플렉스 애플리케이션을 만들어볼 것이다. 구글 맵스 API는 이음새 없는 지도를 만들기 위해 구글 스트리트 뷰 API와 통신하는 역할을 한다.

구글 스트리트 뷰 컴포넌트는 구글 맵 자바 스트리트 API에서 직접 사용할 수 있다. 하지만 Flash API를 통해서는 그렇게 사용할 수 없다. 비록 Flash API를 직접 사용할 수 없다고 하더라도 같이 사용할 수 없다는 것을 의미하는 것은 아니다. 외부 인터페이스를 통해서 자연스럽게 같이 작업하도록 할 수 있다.

예를 들면, Flash-based 지도에서 클릭할 때 클릭한 지점 아래에서 보이는 스트리트 뷰는 클릭한 지점의 위치에 해당하는 부분을 보여주기 위해서 갱신될 것이다. 계속 시도할 경우, 즉 스트리트 뷰에서 지원하지 않는 부분을 계속 클릭한다면 파노라마 장면을 보여줄 수 없는 상황에 대한 메시지를 받게 될 것이다.

지금 어떻게 돌아가는 건지 살펴 보자. 구글 맵 API 예제 페이지에서 몇몇 간단한 예제를 실행한다.

Flex 애플리케이션은 매우 간단하다. 지도를 불러올 때 맵 내비게이션 컨트롤들이 추가 되고 위도/경도(38.900218,-77.036562) 좌표를 중심으로 해서 워싱턴 DC 백악관 앞에 바로 지도가 놓여지고 표지가 추가 된다.

사용자가 지도 위에 클릭할 때, 즉 MapMouseEvent.Click 이벤트가 발생할 때 마다 표지는 클릭하는 위치로 옮겨지고 스트리트 뷰 파노라마는 클릭된 위치를 보여주기 위해서 갱신된다.

아래에서 Flex 애플리케이션 인스턴스(즉, 메모리에 로드된 객체)를 포함하는 HTML 페이지에 추가할 부분이 보일 것이다. 페이지가 초기화 되면 스트리트 뷰 파노라마는 만들어지고 백악관을 표시하도록 하기 위해서 가운데에 놓여질 것이다.

Flex 애플리케이션은 자바스크립트 메소드를 실행하게 만들어주는 외부 인터페이스 클래스를 통해서 스트리트 뷰 파노라마와 통신을 한다.

ExternalInterface.call( "setPanorama", event.latLng.lat(), event.latLng.lng() );

이 call 은 setPanorama 자바스크립트 함수를 호출하고, panoClient.getNearestPanorama() 함수를 불러낸다. 이 메소드의 콜백함수는 showPanoData() 함수이다. 파노라마 데이터가 현재 위치선정을 위해서 사용할 수 있는 경우에는 새로 업데이트 된다. 사용할 수 없는 경우라면 관련 메시지가 에러 로그에 남는다.

어떤 식으로 애플리케이션에서 각각의 컴포넌트들이 함께 작동하도록 할 수 있는지를 이번 기사를 통해 파악해볼 수 있었기를 바란다.

관련 링크

Launch Demo:
http://www.tricedesigns.com/portfolio/googlestreetview/main.html

Source Code:
http://www.tricedesigns.com/portfolio/googlestreetview/srcview/index.html

Google Maps Flash API:
http://code.google.com/apis/maps/documentation/flash/

Google Street View API:
http://code.google.com/apis/maps/documentation/reference.html#GStreetviewOverlay

Google Maps JavaScript API:
http://code.google.com/apis/maps/