読者です 読者をやめる 読者になる 読者になる

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


ちょいと朝方に面白そうな記事を発見しましたので自分でもやってみました。
今回メインとなるルート検索は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>

Android2.2なスマートフォンで動きますので友達間でGPSなどを使うとより面白くなりますね。

参考になるページ

Route directions using geolocation+google maps api on Android 2.2 and Air 2.6
断片ですが、Flashでのルート案内
Google Maps API for Flash
SDKのダウンロード

参考になる本

Flex4プログラミング入門

Flex4プログラミング入門