読者です 読者をやめる 読者になる 読者になる

グーグルマップ


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

QRコードが重い

Flex用にQRコードが簡単に作成できるライブラリ「QRコード」があるのですが、なぜか、こちらを使用して動的にQRコードを作成すると、作成するたびにFlashが重くなり、マップのスクロールが遅くなっていったので、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プロパティがないため、どの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

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

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