BLOG main image
Category (342)
MySpace (89)
Astronomy (50)
Development (178)
Drum (25)
linux에서 subversion설정
누리에 없을 자그마한 자국
살라딘의 생각
saladin's me2DAY
3D Avata - BuddyPoke
기찬 개발이야기
[FLEX] ANT로 ASDOC 사용하기
THLIFE.net
Flash10 대응 Textcube 1.7.5.1..
텍스트큐브 공지사항
«   2008년 11월   »
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30            
325688 Visitors up to today!
Today 188 hit, Yesterday 963 hit
/Development/Flex/AIR 관련글 보기 2008년 08월 05일 11시 02분



Google Map과 Yahoo Map에 대한 Flash용 API가 공개되어 있다.
Google Map의 Flash용 API는 은 올해 중순에 나온것으로 알고 있다.

Flex나 Flash 개발자는 이런 Map API를 이용해서 지도를 자신의 프로그램안에 포함시킬 수 있겠다.

각각의 API의 홈페이지는 다음과 같다.

[Google Map API for Flash]
[Yahoo Map API for Flash]

각각의 홈페이지에 방문하면 Flash용 API인 swc 파일을 다운로드 받아서 사용할 수 있다.
특별히 Yahoo Map인 경우 Flex용 SWC도 배포하고 있다.(그런데 Flex 1.5라서 좀 사용하기 꺼름찍하다.)

Flash용은 MXML로 작성하는 코드가 포함되어 있지 않을 뿐이지 Flex 사용하는데 크게 제약을 받지 않는다.
즉, Flex 프로젝트에서 Flash용을 다운로드 받아서 사용해도 상관없다.

사용하는 절차는 다음과 같다.

1. API Key를 발급 
  Flash또는 Flex 결과물이 올라갈 서버의 도메인 주소에 대한 API Key를 발급받아 이 키를 프로그램안에 내장해야 Map을 사용할 수 있다.

2. SWC를 다운로드 받아 프로젝트 안에 포함
 Flex의 경우 Flex Project의 libs 폴더안에 다운로드 받은 SWC를 복사해두는 것만으로 Map API를 사용할 수 있겠다.

3. 설명서를 보면서 따라해 보기
위 API 홈페이지를 보면 사용설명서를 제공하고 있다.
이 설명서를 보고 따라하며 Map API 사용법을 익힐 수 있겠다.

 
Google Map API의 경우 MXML에 직접 쓸 수 있는 컴포넌트를 제공하지 않기 때문에 UIComponent 위에 Map을 붙여야한다. 아니면 따로 사용자가 Map 클래스를 자식으로 추가하는 UIComponent를 만들어 MXML로 쓸 수 있게 만들면 되겠다.

Google Map API 사용 예 (Language : xml)
<?xml version="1.0" encoding="utf-8"?>
<!-- Copyright 2007 Google Inc. -->
<!-- All Rights Reserved. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
  <mx:Panel title="Google Maps API for Flash - Simple Map" width="100%" height="100%">
    <mx:UIComponent id="mapContainer"
        initialize="startMap(event);"
        resize="resizeMap(event)"
        width="100%" height="100%"/>

  </mx:Panel>
  <mx:Script>
    <![CDATA[
import flash.events.Event;
import com.google.maps.MapEvent;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.LatLng;

  private var map:Map;

  public function startMap(event:Event):void {
    map = new Map();
    map.addEventListener(MapEvent.MAP_READY, onMapReady);
    mapContainer.addChild(map);
  }
     
  public function resizeMap(event:Event):void {
    map.setSize(new Point(mapContainer.width, mapContainer.height));
  }
 
  private function onMapReady(event:Event):void {
    map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
  }
    ]]>

  </mx:Script>
</mx:Application>
 

Yahoo Map의 경우 Flex 용 SDK를 제공하기 때문에 바로 MXML 형태로 사용할 수 있다.
Google Map보다 간단해 보이긴 하다. 역쉬 MXML로 만들면 이렇게 가독성 있게 만들 수 있는 장점이 있다는것...

Yahoo Map Flex API 사용 예 (Language : xml)
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
  xmlns:yahoo="com.yahoo.maps.api.flex.*" xmlns:local="*"
  xmlns:="*" >

  <yahoo:YahooMap id="myMap" width="550" height="400"
   zoomLevel="3" latitude="37.77159"  longitude="-122.401714" />

</mx:Application>
 

어쨌든 둘다 장단점이 있으며 두 API를 비교하는것도 재미있을 듯하다.
API를 분석한다는 것은 어떻게 보면 전체적인 설계를 어떻게 하면 좋은가에 대한 가이드라인을 공부할 수 있는 것이기도 하다.

Flex 를 이용해 Google API를 활용하는 방법에 대한 동영상을 만들어 두었다.
참고하길 바란다.


사용자 삽입 이미지


글쓴이 : 지돌스타(http://blog.jidolstar.com/355)

이 글의 관련글
Trackback Address :: http://blog.jidolstar.com/trackback/355
BlogIcon 검쉰 | 2008년 08월 05일 11시 10분 | PERMALINK | EDIT/DEL | REPLY
전 몇번 까딱거려보다가 만들 것이 생각이 안나서. ^^;
BlogIcon 지돌스타 | 2008년 08월 05일 14시 28분 | PERMALINK | EDIT/DEL
Map API가지고 매쉬업한게 많더라구요.
저도 무엇을 할 수 있을까 많이 생각하고 있습니다.
BlogIcon 찌노 | 2008년 08월 05일 13시 32분 | PERMALINK | EDIT/DEL | REPLY
네이버맵 갖고 깨작거리긴 했었는데 일에 치여서 잠시 잊고 있었다는..;
지도가 워낙에 잘 나와서 ㅎㅎ
냉큼 담아갑니닷! ㅎ
BlogIcon 지돌스타 | 2008년 08월 05일 14시 27분 | PERMALINK | EDIT/DEL
참 잘만들었다는 생각이 들더라구요.
BlogIcon 시난 | 2008년 08월 06일 11시 48분 | PERMALINK | EDIT/DEL | REPLY
후움~ 2008년 매쉬업 대회 때 네이버맵 쓴 걸 하려다가
준비하다 회사 일이 바뻐서 못했네요 ^^;
이제 여유되면 시작해봐야겠어요
BlogIcon 지돌스타 | 2008년 08월 06일 18시 43분 | PERMALINK | EDIT/DEL
네~ 좋은 작품 한번 만들어보세용~
BlogIcon 끄롬씨 | 2008년 08월 09일 02시 13분 | PERMALINK | EDIT/DEL | REPLY
늘 감동 받고 삽니다 ㅎㅎ
Name
Password
Homepage
Secret