FlashでGoogleMapルート案内を行う方法

PHP,MySQL,Flexな日々＋イラストとか

2011-04-04

Flex, Map | 11:01 |

ちょいと朝方に面白そうな記事を発見しましたので自分でもやってみました。

今回メインとなるルート検索はDirectionsを使って開始地点と終了地点を緯度経度で指定してクエリとして投げればOKです。

dir = new Directions();
dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
dirQuery =  "from: Start@"+originLatLong.lat()+","+originLatLong.lng()+" to: Destination@"+fbfLatLong.lat()+","+fbfLatLong.lng();
dir.load(dirQuery);

すべてのソースはこちらになります。

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
		xmlns:s="library://ns.adobe.com/flex/spark"
		actionBarVisible="false" tabBarVisible="false">
	<fx:Script>
		<![CDATA[
			import com.google.maps.LatLng;
			import com.google.maps.LatLngBounds;
			import com.google.maps.interfaces.IPolyline;
			import com.google.maps.services.Directions;
			import com.google.maps.services.DirectionsEvent;

			private function initMap():void
			{
				requestDirections() ;
			}

			private var dir:Directions;
			private var originLatLong:LatLng = new LatLng(33.376412,131.44043);
			private var fbfLatLong:LatLng    = new LatLng(43.060861,141.37207);
			private var dirQuery:String;
			private function requestDirections() : void
			{
				dir = new Directions();
				dir.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS, onDirLoad);
				dirQuery =  "from: Start@"+originLatLong.lat()+","+originLatLong.lng()+" to: Destination@"+fbfLatLong.lat()+","+fbfLatLong.lng();
				dir.load(dirQuery);
			}

			private function onDirLoad(event:DirectionsEvent) : void
			{
				map.clearOverlays();
				
				var directions : Directions = Directions(event.directions);
				var startLatLng:LatLng=directions.getRoute(0).getStep(0).latLng;
				var endLatLng:LatLng=directions.getRoute(directions.numRoutes-1).endLatLng;
				var directionsPolyline:IPolyline = directions.createPolyline();
				map.addOverlay(directionsPolyline);         
				
				var directionsBounds :LatLngBounds = directionsPolyline.getLatLngBounds();
				map.setCenter(directionsBounds.getCenter());
				
				var zoomLevel:Number = map.getBoundsZoomLevel(directionsBounds);
				map.setZoom(zoomLevel);
				map.setAttitude(map.getAttitude());
			}
		]]>
	</fx:Script>
	<fx:Declarations>
	</fx:Declarations>
	<maps:Map3D xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="initMap()" width="100%" height="100%" url="YOUR URL"
			  key="APIKEY" sensor="true"/>
</s:View>