Flash版googleMapをFlexで簡単に使えるようにしてみた

cnetで『グーグル、「Google Maps」をFlashから利用するAPIを公開』
を見て、早速使ってみたのだが、やっぱりActionScriptで
がんばって書くよりもFlexで使えた方が楽なので
とりあえずFlexで使えるようにしてみた。

その結果地図を表示するアプリは以下のように実装できるようになった。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:aslex="control.*" layout="absolute">
	<aslex:GoogleMapComponent id="map" width="100%" height="100%" lat="35.690921" lng="139.700258" zoom="13"/> 
</mx:Application>

すばらしく、シンプル!!
これで以下のような画面が完成。

コンポーネントの標準では、『東京駅』がmxmlから指定した新宿駅の場所になってます。

上記のソースを動かす場合には、
GoogleMapComponent.asをcontrol/以下に配置する必要があります。

ソースの位置関係は、

|--libs
|   |_ map_flex_1_1.swc (googleからDLしてくる
|
|--src
    |--control
    |     |_ GoogleMapComponent.as
    |
    |_ GoogleMapTest.mxml (上に書いてあったソース)

ちなみに以下が
GoogleMapComponent.asのソース

package control
{
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	
	import flash.geom.Point;
	
	import mx.core.UIComponent;
	import mx.events.ResizeEvent;
	
	public class GoogleMapComponent extends UIComponent
	{
		private var _map:Map;
		public function GoogleMapComponent() 
		{
			super();
			_map = new Map();
			_map.addEventListener(MapEvent.MAP_READY,onMapReadyHandler);
			addEventListener(ResizeEvent.RESIZE,resizeHandler)
			addChild(_map);
		
		}
		
		
		private function resizeHandler(e:ResizeEvent):void{
			_map.setSize(new Point(this.width,this.height));
		}		
		
		private function onMapReadyHandler(e:MapEvent):void{
			setMapPoint();
		}
		
		private function setMapPoint():void{
			_map.setCenter(new LatLng(_lat,_lng), _zoom, MapType.NORMAL_MAP_TYPE);
		}
		
		private var _zoom:Number = 14;
		public function set zoom(value:Number):void{
			_zoom = value;
			if(_map.isLoaded())_map.setZoom(value);
		}
		
		public function get zoom():Number{
			return _map.getZoom();	
		}

		/**
		 * 経度を設定する
		 */		
		public function set lng(value:Number):void{
			_lng = value;
			if(_map.isLoaded())setMapPoint();
		}
		
		public function get lng():Number{
			return _map.getCenter().lng();
		}
		
		private var _lng:Number = 139.767084;
		
		/**
		 * 緯度を設定する
		 */
		public function set lat(value:Number):void{
			_lat = value;
			if(_map.isLoaded())setMapPoint();
		}
		
		public function get lat():Number{
			return _map.getCenter().lat();	
		}
		
		private var _lat:Number = 35.681099;
		

	}
}

明日、markerとかをmxml側から簡単に配置できるように
してみようかな。

にしても、APIKeyをflashversに書かなきゃいけない
仕様どうにかならないかな…as内に書きたい