GoogleMapsAPIのマーカーの大きさを地図の実際のサイズに合わせて拡大・縮小させるtips の巻
googleMapsAPI関連の投稿三回目となりました、kijimaです。
今回は、表示したマーカーのアイコン(MarkerOptions.iconに設定したDisplayObject)の大きさを変更してみようかと。
初期設定ですと、マーカーはどのズームレベルでも同じ大きさで表示されるのですが、地図の実寸に合わせてマーカーの大きさも変化させたい!という状況に遭遇したので、以下のように実装してみました。
Marker自体の大きさを変えるのではなく、Markerに設定したMarkerOptions.iconのDisplayObjectの大きさを変える、というのが当たり前ですが、大事なポイントです。
とりあえずは、地図のズームレベルの倍率をセットした配列を用意します。
static const ZOOM_RATIO:Array = [ 0.0001, 0.0002, 0.0005, 0.001, 0.002, 0.005, 0.005, 0.01, 0.02, 0.05, 0.1, 0.2, 0.5, 1, 2, 5, 5, 10, 20, 50 ]
そして、Marker.iconの大きさを変更するときは下のようなコードになります。細かいことは省略していますが、変数名でなんとなく伝わると信じています。。
var initIconWidth:Number = MarkerOptions.icon.width; var initIconHeight:Number = MarkerOptions.icon.height; var currentZoom:int = map.getZoom(); MarkerOptions.icon.width = ( initIconWidth * ZOOM_RATIO(currentZoom) ) / 50; MarkerOptions.icon.height = ( initIconHeight * ZOOM_RATIO(currentZoom) ) / 50;
最後に50で割っているのは、ZOOM_RATIOでいうところのズームレベル19のとき、iconの表示倍率を100%にしたいからです。ちょっとわかりにくくてすいません。
さて、こいつを利用して、こんなゲームを考えてみました。
「○○を探せ!ゲーム」
下のgoogleMap上のどこかに、あるキャラクターが潜んでいます。これから出されるヒントから推測して、キャラクターがどこにいるか見つけてください!
最新版のAdobe FlashPlayerをインストールしてください。
ヒントは、「鎌倉、どんぶり」です! ここまで言えば、どこにいるか、もうお分かりですね?(笑)少なくとも弊社社員ならわかるはず。。
ここかな?と思う場所をズームしていって、キャラクターを探してあげてください!
ゲームをおもしろくするためのルール1:ヒントは難易度別に複数用意して小出しにする。
上のゲームではヒントが一段階、しかもいきなり答えに近いヒントを出してしまいましたが、本来なら難易度別でヒントを用意するといいと思います。
例:東京タワーの場合
・ヒントその1:日本国内にあります。
・ヒントその2:観光スポットです。
・ヒントその3:赤いです。
・ヒントその4:高いです。
で、制限時間が少なくなるにつれ、詳しいヒントが出てくる代わりにもらえる得点は少なくなる、みたいな仕組みだといいかも。
ゲームをおもしろくするためのルール2:一定のズームレベル以上にしないとキャラクターは地図上に表示しないようにする
ターゲットがどこにいるかを探すゲームなのに、世界地図を表示した状態でターゲットのマーカーが表示されていては、どこにいるのかが丸わかりになってしまいます。なので、一定のズームレベル以上にしないとターゲットのマーカーが表示されないように設定しておきます。
var currentZoom:int = map.getZoom(); var opt:MarkerOptions = marker.getOptions(); opt.icon.visible = (currentZoom >= 18);
上の地図上では、かなーりズームしないとキャラクターが見つからないようになってます。
ゲームをおもしろくするためのルール3:キャラクターを一度見つけたら終わりではなく、伝言ゲーム形式にしてつなげていく
これもだいたい想像つくと思いますが、最初のヒントをもとに鎌倉に行ってみたら、「絵の量り売りをしているお店に○○があるよ!」みたいなことを言われて、自由が丘のArt-Meterへ。そしたら次は、、というように、どんどん展開していくと、いっそうおもしろくなってきます。
いわゆるRPGの"おつかい"みたいなゲームが、GoogleMapsAPIを使ってかんたんにできますね。