googleMapsAPI関連の投稿三回目となりました、kijimaです。

はじめてのgoogleMapsAPI

はじめてのGoogle Maps API のつづき

 

今回は、表示したマーカーのアイコン(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を使ってかんたんにできますね。

 

HTML5飯