2008年12月04日

GoogleMaps API for Flash 使ってみた

Flash × ActrionScript3.0勉強中。 今回はFlashの中にGoogleMapsの地図を表示するGoogleMaps API for Flash。

ドラッグで移動。 ホイールで拡大・縮小。 右下のテキストボックスに地名を入れてEnterを押すとその場所に飛びます。 Ajaxで動くものよりは動作が速い気がする。

アップして気づいたんですが、検索がうまくいかないようです。 ローカルではちゃんと動いてたんだけどな・・・。 そのうち直すかもです。

FlashPlayer9以上が必要です。

ソースコードは続きへ

ソースコード

### API KEY ### となっている部分にはGoogleMaps のAPIキーを入れてください。 全然オブジェクト指向じゃないけどそこはスルーの方向で。 地名を表示する機能くらいは付けたかったかも。

package {
	import com.google.maps.controls.ControlPosition;
	import com.google.maps.controls.MapTypeControl;
	import com.google.maps.controls.PositionControl;
	import com.google.maps.controls.ZoomControl;
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;
	import flash.utils.escapeMultiByte;
	
	public class Main extends Sprite {
		private var map :Map;
		private var search :TextField;
		private var alert :TextField;
		
		const offset :Number = 5;
		const mapWidth :Number = stage.stageWidth - offset * 2;
		const mapHeight :Number = stage.stageHeight - offset * 2 - 25;
		const searchWidth :Number = 150;
		const searchHeight :Number = 20;
		const alertWidth :Number = 100;
		const alertHeight :Number = 20;
		var alertFormat :TextFormat;
		
		public function Main():void {
			createMap();
			createSearch();
			createAlert();
		}
		
		/**
		 * マップを作ってステージに追加
		 */
		private function createMap():void {
			map = new Map();
			map.key = '### API KEY ###';
			map.setSize(new Point(mapWidth, mapHeight));
			map.x = offset;
			map.y = offset;
			
			// マップに表示する場所を設定
			map.addEventListener(MapEvent.MAP_READY, function(evt:MapEvent):void {
				map.setCenter(new LatLng(36.0777089, 140.1153257), 14, MapType.NORMAL_MAP_TYPE);
			});
			
			stage.addChild(map);
			
			// マウスホイールでズーム
			map.addEventListener(MouseEvent.MOUSE_WHEEL, function(evt:MouseEvent):void {
				if(evt.delta > 0 && map.getZoom() < 19) {
					map.setZoom(map.getZoom() + 1);
				}
				else if(evt.delta < 0 && map.getZoom() > 0) {
					map.setZoom(map.getZoom() - 1);
				}
			});
		}
		
		/**
		 * 検索ボックスを作ってステージに追加
		 */
		private function createSearch():void {
			search = new TextField();
			
			search.x = stage.stageWidth - searchWidth - offset;
			search.y = stage.stageHeight - searchHeight - offset;
			search.width  = searchWidth;
			search.height = searchHeight;
			
			search.background = true;
			search.backgroundColor = 0xB7BEAE;
			search.border = true;
			
			search.type = TextFieldType.INPUT;
			
			var format:TextFormat = new TextFormat();
			format.size = searchHeight * 0.5;
			search.setTextFormat(format);
			
			// エンターを押したら場所を検索してマップを移動
			search.addEventListener(KeyboardEvent.KEY_DOWN, function(evt:KeyboardEvent):void {
				if(evt.charCode == 13 && search.text != '') {
					searchMap();
				}
			});
			
			stage.addChild(search);
		}
		
		/**
		 * 検索失敗を知らせるラベル
		 */
		private function createAlert():void {
			alert = new TextField();
			alert.x = offset;
			alert.y = stage.stageHeight - alertHeight - offset;
			alert.width = alertWidth;
			alert.height = alertHeight;
			alert.selectable = false;
			alert.text = '';
			
			alertFormat = new TextFormat();
			alertFormat.color = 0xFF8000;
			alert.setTextFormat(alertFormat);
			stage.addChild(alert);
		}
		
		/**
		 * テキストボックスに入力された地名を検索
		 */
		private function searchMap():void {
			var loader:URLLoader = new URLLoader();
			
			loader.addEventListener(Event.COMPLETE, function(evt:Event):void {
				try {
					var res:XML = new XML(loader.data);
					var ns:Namespace = new Namespace('http://earth.google.com/kml/2.0');
					default xml namespace = ns;
					
					var latLng:Array = (res.Response.Placemark.Point.coordinates).split(',');
					
					// XML中の並びとは逆(緯度,経度)になる
					trace(latLng[1], latLng[0]);
					map.setCenter(new LatLng(latLng[1], latLng[0]), 14, MapType.NORMAL_MAP_TYPE);
					alert.text = '';
				}
				catch(err:Error) {
					// 地名が見つからなかった場合にはその旨表示
					alert.text = "couldn't find";
					alert.setTextFormat(alertFormat);
				}
			});
			
			var place:String = escapeMultiByte(search.text); // 多バイト文字はエスケープする必要がある
			loader.load(new URLRequest('http://maps.google.com/maps/geo?q=' + place + '&output=xml&key=### API KEY ###'));
		}
	}
}

参考

Posted by Handle at 00:48│Comments(0)プログラミング
コメントフォーム
上の画像に書かれている文字を入力して下さい
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。