グーグルマップ

Flash10 Flex


ちょいとGoogleマップでもやってみようかなぁってことで作ってみました。
こんな感じ。
http://moeten.info/maidcafe/?m=flashmap
せっかくなので、制作において、気づいた点の紹介です。

ＱＲコードが重い

Flex用にＱＲコードが簡単に作成できるライブラリ「ＱＲコード」があるのですが、なぜか、こちらを使用して動的にＱＲコードを作成すると、作成するたびにＦｌａｓｈが重くなり、マップのスクロールが遅くなっていったので、PHPなどを利用して、として参照するようにしたほうがいいかも。

カスタムウィンドウでリッチなウィンドウを表示

GoogleMapでアイコンをクリックした際に出るウィドウをカスタマイズすることがでます。
ちょっとリッチなウィンドウが作れるので知っておきたい。
指定方法は簡単でDisplayObjectのIDを指定するだけ。

var info:InfoWindowOptions = new InfoWindowOptions({
  strokeStyle: {
    color: 0xff6aef
  },
  fillStyle: {
    color: 0xffffff,
    alpha: 0.9
  },
  title:"title",
  width: 300,
  customWindow:myDisplayObject,  //←DisplayObjectが指定できる
  cornerRadius: 12,
  padding: 10,
  hasCloseButton: true,
  hasTail: true,
  tailWidth: 20,
  tailHeight: 30,
  tailOffset: 12,
  tailAlign: InfoWindowOptions.ALIGN_LEFT,
  pointOffset: new Point(0, -40),
  hasShadow: true
});
<mx:Canvas id="myDisplayObject"></mx:Canvas>

ただし、キャッシュが効くのか、動的なDisplayObjectを作成した場合、最初に作成したものが表示されるため、今回は見送り。

マーカーのイベントリスナーに引数を追加して個別管理

GoogleMapのアイコンクリックイベントで困るのが、marker.nameやmarker.idプロパティがないため、どのＩＤのアイコンをクリックしているのかを取得できないこと。
なので、イベントリスナーを追加する際に、識別用に引数を追加して渡す。

marker.addEventListener( MapMouseEvent.CLICK , onMarkerClick( i ) );
private function onMarkerClick( i:int ):Function{
    return function ( e:MapMouseEvent ):void{
        trace(i);
       }
}

Googleマップの時だけではなく、イベントリスナーに引数を追加して渡したい時に便利なので知っておきたいテクニック。

ArrayCollectionで変数の変化を外部コンポーネントに知らせる

外部コンポーネントを使う際、変数の変化をキャッチするにはArrayではなくArrayCollectionを使う。

//shopWindow.mxml
new ArrayCollection([{'shopname' : null}]);
trace( dataset.getItemAt(0).shopname );//null
//main.mxml
shopWindow.dataset.setItemAt({'shopname':"hogehoge"},0);
//shopWindow.mxml
trace( dataset.getItemAt(0).shopname );//hogehoge

マップにフィルターはかけられない

ちょいとＺｏｏｍした時にBlurエフェクトをかけようとしたのですが、セキュリティーエラーでうまくエフェクトを利用できませんでした。
やり方が他にもありそうですが、とりあえずは、気をつけておきたい部分。
参考になるページ
Google Maps API for Flash
Google Map を使ってみる。 markerとInfoWindow