こんにちは、大掃除ははかどっていますか？　実家の大掃除も終盤にさしかかったkijimaです。

最近は個人的にGoogle Maps API関連のエントリーが続いていますが、今回は前回の記事「Google Maps API for Flash ルート検索で出来ること、出来ないこと」で取り上げたルート検索について、実際のサンプルコードを書いてみたいと思います。

 

 

出発地と目的地はお約束ですが、以下のように設定します。

出発地：カヤック自由が丘支社（東京都目黒区自由が丘2-8-6）
目的地：カヤック鎌倉本社（神奈川県鎌倉市小町2-14-7）

そして、実際にFlash上に表示したものがこちら。

 

サンプルコードなので、手間をかけずにドキュメントクラス内にすべて記述してしまいました。 

package {	
	import flash.display.*;
	import flash.events.*;
	import flash.geom.Point;

	import com.google.maps.*;
    import com.google.maps.controls.*;
	import com.google.maps.overlays.*;
	import com.google.maps.services.*;
	import com.google.maps.interfaces.*;	

	public class SetRoute extends Sprite {
		
		private var _map:Map;
		private var _positionControl:PositionControl;
		private var _typeControl:MapTypeControl;
		private var _zoomControl:ZoomControl;
				
		private var zoomParam:int = 5;
		private var startName:String = "東京都目黒区自由が丘2-8-6";
		private var goalName:String = "神奈川県鎌倉市小町2-14-7";
		
		private var route:Route;
		private var polyLine:IPolyline;

		private var directions:Directions;		

		public static const SET_ROUTE_SUCCESS:String = "SET_ROUTE_SUCCESS";
		public static const SET_ROUTE_FAILED:String = "SET_ROUTE_FAILED";
		
		public function SetRoute(){
			createMap();
		}
		
		private function createMap():void {
			_map = new Map();
			//APIキーはローカル上でパブリッシュする際には必要ありません。
			_map.key = "hoge";
			_map.language = "ja";
			_map.setSize(new Point(stage.stageWidth, stage.stageHeight));

			var positionControl:PositionControl = new PositionControl();
			var typeControl:MapTypeControl = new MapTypeControl();
			var zoomControl:ZoomControl = new ZoomControl();
			
			_map.addControl(positionControl);
			_map.addControl(typeControl);
			_map.addControl(zoomControl);
			
			addChild(_map);
			
			_map.addEventListener(MapEvent.MAP_READY, onMapReady);
		}
		
		private function onMapReady(e:MapEvent):void {
			_map.removeEventListener(MapEvent.MAP_READY, onMapReady);
			_map.overlayRaising = false;
			
			setRoute( new DirectionsOptions( { avoidHighways:false, travelMode:"TRAVEL_MODE_DRIVING"} ) );
		}
		
		private function setRoute(opt:DirectionsOptions) {
			directions = new Directions(opt);
			directions.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, directionSuccess);
			directions.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE, directionFail);
			directions.load( "from: " + startName + " to: " + goalName );
		}
		
		private function directionFail(event:DirectionsEvent) : void {
			trace( "ルート設定失敗 " + event.status);
		}
		
		private function directionSuccess(event:DirectionsEvent) : void {
			trace("ルート設定成功 " + event.status );
			
			var route = directions.getRoute(0);
			var polylineOption:PolylineOptions = new PolylineOptions({
				strokeStyle: {
					thickness: 5,
					color: 0xFF00FF,
					alpha: 0.5
				}
			});
			
			polyLine = directions.createPolyline(polylineOption);
			_map.addOverlay(polyLine);
			
			//ルートにあわせて地図の表示拡大率を変更
			var bounds:LatLngBounds = directions.bounds;
			var zoom:Number = _map.getBoundsZoomLevel(bounds);
			_map.setCenter(bounds.getCenter(), zoom);
			
		}
	}
}

 

さてさて、経路は表示できました。次回はスタート地点とゴール地点にマーカーアイコンを表示させたりしてみましょう。〜つづく〜