来週から少し早い夏休みが取れることになったので、今週末は心置きなく徹夜プログラミング。プログラムは夜通し組むに限りますな。
今日はGoogleマップを使用した実用的なサンプルを作ろうと思い、リファレンスを見ながらちまちまコードを試していたら、いつの間にかこんなものが出来上がってしまった。
GoogleMapAPIの上を鳥が飛んでいく（注意：音が出ます）
http://www.mwsoft.jp/programming/googlemap/google_map_v3_lamia_ff.html
IE6等position:fixedが使えないブラウザはこっち
http://www.mwsoft.jp/programming/googlemap/google_map_v3_lamia.html
矢印キーを押すと、鳥が動きます
なんというか、実用的な匂いがさっぱり漂ってこない代物になってしまった。。。
その割に作るのはけっこう苦労していて、単純にposition:absoluteの画像を真ん中に置けば良いかと思いきや、そのまま置くと透過部分がうまく地図を透かしてくれなかった。
その為、鳥の画像をカスタムアイコンとして設置し、マップに対してset_centerして、それと同じ座標でアイコンに対してset_positionをしていたりする。
残課題
・コントロール部分が文字だけで分かりづらいので画像で見栄え良くする
・上に向かって飛ぶ時の画像が素敵過ぎる状態を解消する
・Speed downを連打すると逆送し始める
・ズームイン、ズームアウト時に鳥の画像サイズを変更する
・デフォルトを航空写真にしてるけど、Hybridの方がいいかも
・Move stop後、ストップ前と同一方向キーを押しても再発進しない
・毎回set_centerしているとアニメーションがスムーズにいかないので、画面より大きいMAPを保持しておいて、ブラウザのスクロールで移動しつつたまにポジションを入換えるようにした方が良さげ
などなど、たくさんある。たぶん手をつけずに放置。
2009/08/05追記
setCenter時のリクエスト量が変だったので、3画面分を先読みしてスクロールする形に変更。1.5画面分くらい飛ぶごとに画面がガクッとなる……