Flash CS3でGoogle Maps APIを利用してみる 
Google Mapコンポーネントで簡単にFlashでも地図を扱うことができるので今回は表示部分だけやってみました。
で、CS3で作る際にまず準備として
１．APIキー取得
http://code.google.com/apis/maps/signup.html
２．SDK（swcファイル）をダウンロード
http://code.google.com/apis/maps/documentation/flash/
解凍して中のswcファイル（最新はmap_1_8a.swc）を
C:\Program Files\Adobe\Adobe Flash CS3\ja\Configuration\Components
にGoogleフォルダを作って中に格納します。
CS3を起動すると、コンポーネントパネルにGoogleMapsConponentが入っているのが分かります。
それをライブラリにドラッグするだけで準備ＯＫ！
1.6以前の古いバージョンは ここ にあります。
mxpファイルが入っていればダブルクリックで簡単にインストールできますね。
こちらのページが大変参考になりました！
http://1ka2ka.com/archives/200808/24_005443.html
３．ステージに地図表示
あとは以下を参考にクラスをインポートしていくつかnewするだけで地図が表示できますよ。
リファレンスやチュートリアルを見れば分かりやすく書いてあります。
リファレンス
http://code.google.com/apis/maps/documentation/flash/reference.html
チュートリアル
http://code.google.com/apis/maps/documentation/flash/tutorial-flash.html
デモギャラリー
http://code.google.com/apis/maps/documentation/flash/demogallery.html
サンプル
http://code.google.com/apis/maps/documentation/flash/examples/index.html
４．追加オプション
拡大比率、経度緯度、地図タイプ等を設定するだけで表示はすぐ出来ちゃいます。
その他、地図上にアイコンや線を描くことができるので
東京タワーと六本木ヒルズにアイコンを設置して線で結んでみました。
さらに直線以外に道路に沿って細かい線を引くこともできます。
以下のエンコードユーティリティツールで手動で設定した東京タワー周辺のポイント座標をエンコードして
赤枠で囲んだEncoded PolylineとEncoded LevelsをEncodedPolylineDataの引数に入れてやることで表示できました。
エンコードユーティリティ
http://code.google.com/apis/maps/documentation/polylineutility.html
エンコードアルゴリズム
http://code.google.com/apis/maps/documentation/polylinealgorithm.html
ソースは
package
{
import flash.display.MovieClip;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.geom.Point;
import flash.events.Event;
import flash.events.MouseEvent;
import com.google.maps.controls.OverviewMapControl;
import com.google.maps.MapEvent;
import com.google.maps.MapMouseEvent;
import com.google.maps.Map;
import com.google.maps.MapType;
import com.google.maps.LatLng;
import com.google.maps.LatLngBounds;
import com.google.maps.ProjectionBase;
import com.google.maps.interfaces.IProjection;
import com.google.maps.interfaces.IMapType;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.controls.PositionControl;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.styles.StrokeStyle;
import com.google.maps.styles.FillStyle;
import com.google.maps.overlays.Polyline;
import com.google.maps.overlays.PolylineOptions;
import com.google.maps.overlays.EncodedPolylineData;
public class GoogleMap1 extends MovieClip
{
private const API_KEY:String = "あなたのAPIキー"; //APIキー
private var container:MovieClip;
private var map:Map;
public function GoogleMap1()
{
initMap();
}
private function initMap():void
{
//コンテナ作成
container = new MovieClip();
container.x = container.y = 0;
addChild(container);
//Google MAP 作成
map = new Map();
map.key = API_KEY; //APIキー
map.language = "ja"; //言語
map.setSize(new Point(stage.stageWidth, stage.stageHeight)); //地図サイズ設定
map.addControl(new PositionControl()); //ポジションキーボタン
map.addControl(new ZoomControl()); //拡大縮小スライダー
map.addControl(new MapTypeControl()); //地図タイプセレクトボタン
map.addControl(new OverviewMapControl()); //右下オーバービューコントローラー
map.addEventListener(MapEvent.MAP_READY, onMapReady, false, 0, true); //イベント設定
container.addChild(map);
}
//地図生成完了イベント
private function onMapReady(e:MapEvent):void
{
map.removeEventListener(MapEvent.MAP_READY, onMapReady);
//初期表示設定
map.enableScrollWheelZoom(); //マウスホイールで拡大縮小できる
map.enableContinuousZoom(); //スムースな拡大縮小ができる
//座標セット
map.setCenter(
new LatLng(35.6586317, 139.7454109), //座標
14, //拡大率
MapType.NORMAL_MAP_TYPE //地図タイプ
);
//マーカー追加
addMarkers();
//直線ラインを引く
addDrawLine();
//地図ラインを引く
addMapLine();
//ステージ設定
initStage();
}
//マーカー配置
private function addMarkers():void
{
//マーカー1設定
var marker1:Marker = new Marker(
new LatLng(35.6586317, 139.7454109),
new MarkerOptions({strokeStyle: new StrokeStyle({color: 0xFF0000}), fillStyle: new FillStyle({color: 0xFFFFFF, alpha: 1}), radius:10, hasShadow:true})
);
marker1.addEventListener(MapMouseEvent.CLICK, clicked, false, 1, true);
//マーカー2設定
var marker2:Marker = new Marker(
new LatLng(35.6602616, 139.7295483)
);
marker2.addEventListener(MapMouseEvent.CLICK, clicked, false, 1, true);
//マーカー配置
map.addOverlay(marker1);
map.addOverlay(marker2);
}
//マーカークリックイベント
private function clicked(event:MapMouseEvent):void
{
map.panTo(event.target.getLatLng()); //マーカー座標へ移動
}
//直線ラインを引く
private function addDrawLine():void
{
// Polyline overlay.
var polyline:Polyline = new Polyline([
new LatLng(35.6586317, 139.7454109),
new LatLng(35.6602616, 139.7295483)
], new PolylineOptions({ strokeStyle: new StrokeStyle({
color: 0xFF0000,
thickness: 4,
alpha: 0.7})
}));
map.addOverlay(polyline);
}
//地図に沿ったラインを引く
private function addMapLine():void
{
// エンコードされた座標値
var encodedPoints:String = "kqsxE{_}sYiAm@kCbHk@`E|An@fNuFpJqEcCwB??{DOwEbAiByAy@vC"
// エンコードされたズームレベル値
var encodedLevels:String = "BBBBBBBBBBBBB";
var encodedPolyline:Polyline = Polyline.fromEncoded(
new EncodedPolylineData(
encodedPoints, // エンコードされた座標値
32, // 線の描画精度
encodedLevels, // エンコードされたレベル
4
),
new PolylineOptions({ strokeStyle: new StrokeStyle({
color: 0x00FF00, // 線の色
thickness: 10, // 線の太さ
alpha: 0.5 // 線の透明度
})
}));
map.addOverlay(encodedPolyline);
}
//ステージ設定
private function initStage():void
{
stage.showDefaultContextMenu = false;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
stage.addEventListener(Event.RESIZE, stageResizeListener);
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener, true);
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
}
//マウス移動イベント
private function mouseMoveListener(e:MouseEvent):void
{
//マウスの座標取得
var nowLL:LatLng = map.fromViewportToLatLng(new Point(mouseX, mouseY));
//trace(nowLL.lat()+" , "+nowLL.lng());
}
//ステージリサイズイベント
private function stageResizeListener(e:Event):void
{
map.setSize(new Point(stage.stageWidth, stage.stageHeight));
}
}
}
alt
