UMap(AS 3.0) 覚え書き

Flash 内で GoogleMap を使う方法はいくつかありますが(参考記事:「Flash と GoogleMaps を連携させるライブラリ」)、今僕は AS3 製作にて AFComponents の「UMap(AS3.0)」を使っています。Showcase でも紹介されていますが「東京マラソン」の公式サイトでも使われているようです。

使用にあたっては最初に会員登録作業は必要ですが UMap は無料で使えます。(商用利用時の権利について 5ive の中の人が分かりにくいと仰ってたのでその時には要注意。)

UMap 導入からASベースでの使用解説も Flash OOP Japan 様のサイトで日本語で拝見できるし、本家サイトのチュートリアルフォーラムが充実しているので助かります。もちろん API ドキュメントもあります。

と、充実しているのにつまづく僕用のメモ。

日本語地図にしたい

UMap日本地図を使っている方で言及されている方がいない気がしますが、僕の場合は勝手に日本地図にならなかったので:

umap = new UMap();
var settings:URLRequest = new URLRequest("http://www.afcomponents.com/components/g_map_as3/settings.xml?rand=" + Math.random());
var language:URLRequest = new URLRequest("http://maps.google.com/maps?file=api&v=2")
var copyright:URLRequest = new URLRequest("http://www.afcomponents.com/proxy/g_map_as3/copyright.php");
umap.control.provider = new GoogleProvider(false, settings, language, copyright);

で日本語地図にした。別アプローチで

trace(umap.getLanguage()); //この時点で既に ja なのだけど英語地図
umap.language = "ja"; 

にしても日本地図になるというわけではないので失敗。

画面を滑らかにスライド移動

umap.panTo(new LatLng(destLat,destLng));

(setCenter()は引数の緯度経度が中心になるように画面をリフレッシュする機能のようなので使い分けること)

とにかくなめらか地図移動したい

まず animatePan と animateZoom プロパティを true にしておく。

地図コントロールボタン関連

画面左にコントロールボタンを配置する時はこんな感じ

//十字移動ボタンの配置コード:
//ステージ上に追加(別途 FlashIDE 上でコンポーネントをステージに置いて命名しておく必要あり。※PositionControlクラスが見当たらないからFlex上でエラー出っぱなし問題あり。)
umap.addControl(PositionControl);
//移動し終えたらイベント
umap.addEventListener(MapEvent.PAN_STOP, eventListener)
//押しっぱなしでスクロール
PositionControl.autoRepeat = true;

上にSprite重ねた時のrollOver

UMAPインスタンスの上に半透明Spriteをかぶせるケースがあったんだけど、上にSpriteかぶせるとUMAP上のOverlayEventROLL_OVERは効かない。これは別にUMAPコンポーネントだからではなく、AS的にそういう使用で、MOUSE_OVERにすれば下地の当たり判定ができるとのこと。UMAPのOverlayEventドキュメントの上の方でMOUSE_OVER実装してるとか書いてあるのに、下の方には載ってない。実装してないじゃん。

地図を衛星写真に

08.07.30追記:前は以下のスクリプトで動いたのだけど久しぶりにさわったらエラーが出た。UMPAのバージョンアップで何か変わったのかな?あとでドキュメントで確かめる。

//地図を衛星写真にする
umap.mapType = "satellite";