Google Maps API For Flash « Daidiru

Google Maps API For Flash

2010.7.30 7:37 PM

先日、某案件でGoogle Maps API For Flashを使ってごにょごにょしたので、
自分なりに感じたことや注意点をメモっとく。

APIキーに関して

Google Maps APIを使用するには、ここでGoogle Maps API For Flashを使用するサイト（またはアプリ）のドメインを指定してAPIキーを取得する。
取得したAPIキーは、Flashで開発する場合は以下のようにASのコード内で指定する。

map.key = “取得したAPIキー”;

APIキーはSWFファイルにコンパイルされ、SWFファイルがホストされているドメインと一致する必要がある。
なので、開発環境、テスト環境、本番環境など、各環境でドメインが違う際には、予め各ドメインごとにAPIキーを取得しておいて、ドメイン判別してそれぞれにAPIキーを設定してあげる作りにしておくと良いかもしれない。

var _url:String = loaderInfo.url;
if(_url.indexOf(”honban.jp”) >= 0) map.key = “honban.jp用のAPIキー”;
else if(_url.indexOf(”test.com”) >= 0) map.key = “test.com用のAPIキー”;
else if(_url.indexOf(”dev.co.jp”) >= 0) map.key = “dev.co.jp用のAPIキー”;

Map3Dに関して

※以下2010年7月現在の最新版であるVersion 1.18に対しての内容

・地図を3Dで見せたい時などはMap3Dクラスを使用する。
使い方はここを参考。
ただMapクラスに比べると、Map3Dクラスは地図画像の読み込みや描画が若干遅いようだ。

・Map3Dクラスは、デフォルトだと黄色の枠が表示されてしまう。これはAPI独自のキーボードイベントが有効になっていると出てしまう枠のようだ。黄色枠を消したければ、キーボードイベントを無効にする。

map.disableControlByKeyboard();

黄色枠は気になるけど、キーボード操作をさせたいのであれば、API独自のキーボードイベントを使わずに、Flashのネイティブキーボードイベントを使用して、自分でキーボード操作の仕組みを作った方がよさげ。

・地図にパースをつける。

地図にパースをつけたい時は、Map3DインスタンスのsetAttitudeメソッドに対してAttitudeクラスのインスタンスを指定する。

Attitude(yaw:Number, pitch:Number, roll:Number)

例えば、30度Pitch回転させたい時は以下のように指定する。

map.setAttitude(new Attitude(0, 30, 0));

ただ、傾ければ傾けるほど描画処理が重くなるようなので注意が必要。

・ドラッグを無効にする。

map.disableDragging();

・ダブルクリックを無効にする。

map.setDoubleClickMode(MapAction.ACTION_NOTHING);

・マウスホイールでのZOOM機能はAPI独自の機能を使わずに自分でZOOMの仕組みを作った方がいい。
理由は、Macのfirefoxで動作しないし、細かい動きの設定などができないから。
ちなみにAPI独自の機能を使う場合は以下のように指定する。

map.enableScrollWheelZoom(); //マウスホイールで拡大縮小できる
map.enableContinuousZoom(); //スムースな拡大縮小ができる

・地図上を滑らかに移動、寄り引きをさせる。
個人的な感覚だが、setCenterメソッドが、一番滑らかに移動できた。
panToやsetZoomなどメソッドは何種類か用意されているが、setCenterが一番良さげ。
このsetCenterメソッドをENTER_FRAMEイベントとかトィーンライブラリのUPDATEイベントの中で処理して、
アニメーションさせるとそれなりに滑らかに動く。

public function setCenter(latLng:LatLng, opt_zoom:Number, opt_mapType:IMapType = null):void

・Parameters
latLng:LatLng — Coordinates for the new center.
opt_zoom:Number — New zoom level.
opt_mapType:IMapType (default = null) — New map type.

・ズームの範囲。
ズームは0〜21くらい（すごいアバウトw）までの数値で指定できるようだ。0が一番引き、21が一番寄り。

Polylineに関して

Polylineオブジェクトは、地図上に線形のオーバーレイを作成する。
Polylineは一連の点で構成され、これらの点を指定された順序に結ぶ連続した線セグメントを作成する。
KMLデータを元にPolylineを描画することもできる。
点（緯度経度）が多すぎると画面描画処理が重くなるので注意が必要。
個人的な感覚では、20,000ポイントくらいがまともに動く限界の数といったところ。
エンコード化ポリラインを使用すると、描画処理も軽くなる。
これは地図のズームレベルによって、ラインの精度をコントロールできるらしい。詳細地図の場合は詳細なポイントを、粗い地図の場合はポイントも粗くして表示速度を得ているらしい。

注意点やもっとこうして欲しい点はあるけど、
やっぱりよくできてる、すごいぞGoogle Maps API！！

タグ: Actionscript, Flash, GoogleMap