AIR for AndroidでGoogle Map Direction API (Flash Builder Burrito) [Google Maps]
Flash Builder Burritoで、先日のDirection API を使った
Google MapsのアプリをAIR for Androidに移植してみました。
-----
手順はこんな感じです。
■ Flash Builder Burritoでアプリを組む準備
1. Fileから、Flex Mobile Projectを選択する。
2. Project name に好きな名前を入力する。ここではGmap1とする。
3. 必要に応じて、Mobile Settings, Sever Settingsを設定する。
今回はそのままにしておく。
4. Build Pathsで、Google Mapsのライブラリを追加してもよいし、
libsにドラッグしても動作する。
Flexなので、map_flex_1_20.swcを利用する。
■MXMLの編集
1. Gmaps1.mxmlは、アプリを管理するところなので、今回はそのままにする。
2. viewsにあるGmaps1Home.mxmlを編集する。
http://ofuku.blog.so-net.ne.jp/2010-11-02のソースとほぼ同じ。
<s:View>内に以下を追加。
xmlns:local="local.*"
xmlns:maps="com.google.maps.*";
あとは、http://ofuku.blog.so-net.ne.jp/2010-11-02のソースとほぼ同じ。
■ ビルド
まず、AndroidをUSBケーブルに接続する。
ここでは、AndroidのSDKやUSBドライバーが入っている状態である。
1. ProjectからExport Release Build...を選択
2. 設定を確認して、Nextボタンを押す
3. コードサイニング認証の鍵をの場所を設定して、パスワードを入れる。
最近は、この認証書が個人でも買うことが可能なので、自己認証ではなく、
きちんとしたものを用意する。
※試すだけの場合は、取りあえず自己認証で。
4. Finishボタンを押す。
5. Androidにapkファイルがインストール
Androidからアプリを起動してみるとアプリが起動していることがわかります。
Gmaps1Home.mxmlのも貼付けておきます。
<?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"
xmlns:local="local.*"
xmlns:maps="com.google.maps.*"
title="Home">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<maps:Map width="100%" height="100%"
id="map_canvas"
url="自分のサイト"
key="自分のキー"
sensor="false"
language="ja"
countryCode="JP"
mapevent_mapready="{onMapReady();}"
/>
<fx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.services.Directions;
import com.google.maps.services.DirectionsEvent;
import com.google.maps.services.DirectionsOptions;
private var wayPoints:Array =[];
private var directions:Directions;
private var i:int = 0;
private function onMapReady():void{
var iniPos:LatLng = new LatLng(34.8144589, 135.7676947);
var initZome:Number = 10;
map_canvas.setCenter(iniPos, initZome);
wayPoints.push("35.05141,135.763825");
wayPoints.push("34.689023,135.839880");
trace(wayPoints[0]);
trace(wayPoints[1]);
//Directionの作成
directions = new Directions();
directions.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,
directionSuccess);
directions.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE,
directionFail);
directions.loadFromWaypoints(wayPoints);
}
private function directionFail(event:DirectionsEvent):void{
//Direction 失敗
trace(event.directions.status);
trace("eroor");
}
private function directionSuccess(event:DirectionsEvent):void{
//Direction の検索結果成功
trace("success");
map_canvas.clearOverlays();
map_canvas.addOverlay(directions.createPolyline());
}
]]>
</fx:Script>
</s:View>
-----
手順はこんな感じです。
■ Flash Builder Burritoでアプリを組む準備
1. Fileから、Flex Mobile Projectを選択する。
2. Project name に好きな名前を入力する。ここではGmap1とする。
3. 必要に応じて、Mobile Settings, Sever Settingsを設定する。
今回はそのままにしておく。
4. Build Pathsで、Google Mapsのライブラリを追加してもよいし、
libsにドラッグしても動作する。
Flexなので、map_flex_1_20.swcを利用する。
■MXMLの編集
1. Gmaps1.mxmlは、アプリを管理するところなので、今回はそのままにする。
2. viewsにあるGmaps1Home.mxmlを編集する。
http://ofuku.blog.so-net.ne.jp/2010-11-02のソースとほぼ同じ。
<s:View>内に以下を追加。
xmlns:local="local.*"
xmlns:maps="com.google.maps.*";
あとは、http://ofuku.blog.so-net.ne.jp/2010-11-02のソースとほぼ同じ。
■ ビルド
まず、AndroidをUSBケーブルに接続する。
ここでは、AndroidのSDKやUSBドライバーが入っている状態である。
1. ProjectからExport Release Build...を選択
2. 設定を確認して、Nextボタンを押す
3. コードサイニング認証の鍵をの場所を設定して、パスワードを入れる。
最近は、この認証書が個人でも買うことが可能なので、自己認証ではなく、
きちんとしたものを用意する。
※試すだけの場合は、取りあえず自己認証で。
4. Finishボタンを押す。
5. Androidにapkファイルがインストール
Androidからアプリを起動してみるとアプリが起動していることがわかります。
Gmaps1Home.mxmlのも貼付けておきます。
<?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"
xmlns:local="local.*"
xmlns:maps="com.google.maps.*"
title="Home">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<maps:Map width="100%" height="100%"
id="map_canvas"
url="自分のサイト"
key="自分のキー"
sensor="false"
language="ja"
countryCode="JP"
mapevent_mapready="{onMapReady();}"
/>
<fx:Script>
<![CDATA[
import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.services.Directions;
import com.google.maps.services.DirectionsEvent;
import com.google.maps.services.DirectionsOptions;
private var wayPoints:Array =[];
private var directions:Directions;
private var i:int = 0;
private function onMapReady():void{
var iniPos:LatLng = new LatLng(34.8144589, 135.7676947);
var initZome:Number = 10;
map_canvas.setCenter(iniPos, initZome);
wayPoints.push("35.05141,135.763825");
wayPoints.push("34.689023,135.839880");
trace(wayPoints[0]);
trace(wayPoints[1]);
//Directionの作成
directions = new Directions();
directions.addEventListener(DirectionsEvent.DIRECTIONS_SUCCESS,
directionSuccess);
directions.addEventListener(DirectionsEvent.DIRECTIONS_FAILURE,
directionFail);
directions.loadFromWaypoints(wayPoints);
}
private function directionFail(event:DirectionsEvent):void{
//Direction 失敗
trace(event.directions.status);
trace("eroor");
}
private function directionSuccess(event:DirectionsEvent):void{
//Direction の検索結果成功
trace("success");
map_canvas.clearOverlays();
map_canvas.addOverlay(directions.createPolyline());
}
]]>
</fx:Script>
</s:View>
2011-02-17 02:25
nice!(0)
コメント(0)
トラックバック(0)
コメント 0