2006/10/21

マウスホイールでズーム

2006/10/21 土曜日 - 23:08:51 by webmaster

GoogleMaps本家にはあるけど、まだAPIに降りてきてない機能で、マウスホールでズームイン/アウトの機能がある。
マウスホイールのイベントでズームイン/アウトするだけならそんなに難しくなさそうなんだけど、本家と同じ動きを再現したい。
『本家の動き』:マウスポインタの位置を基準にズームイン/アウトするので、マウスを動かさずに済む
ポイントになるのがズームイン/アウト時のマップセンターをどこにするか、だ。
拡大/縮小率がわからなかったので調べてみると、ズームイン:拡大率2倍、ズームアウト:縮小率2倍。
であれば、
・ズームイン時のマップセンター=現在のマップセンターと現在のマウス位置の中間点
・ズームアウト時のマップセンター=現在のマップセンターを中心にしたマウスポインタの対極点
になる。
ので、これを組み込んでみたのがこれ。
マウスホールズーム可能のマップ表示サンプル
ズームイン/アウトがスムーズ設定に対応してくれればほぼ同じなんだけど、それは無理だった。
(ちなみに、位置計算で手抜きをしているので、日付変更線付近でやるととんでもないところに飛ぶ。)
参考にさせていただきました。
JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法

wp-googlemaps TODO その3

2006/10/21 土曜日 - 12:06:40 by webmaster

カテゴリで絞込みが可能に。
以下はカテゴリ「test」で絞込み表示したもの。
拡大表示しても他のポイントは表示されない。

wp-googlemaps TODO その2

2006/10/21 土曜日 - 02:08:19 by webmaster

地図表示のオプション設定を出来るようになったよ。

地図表示サイズの設定
初期表示タイプの選択(地図・写真・地図+写真)
地図コントローラーの選択表示(大・小・ズームのみ・無し)
タイプセレクタ、スケールコントロール、オーバービューコントロールのon/off
ダブルクリックズームのon/off