Google mapsのスライドの仕組みを教えて

大きな画像のある一部分だけを表示させ、滑らかなに移動するものが作りたいです。

Google mapsのスライドの仕組みと同じものです。Google　mapsはAjaxを使っていますが、
非同期でダウンロードはしません。事前にクライアントにあるものだけを使いますので、
そこまでがいりません。ただのJavaScriptレベルの話しだと思います。

<div>のabsoluteの座標をずらせば、なめらかに動きますが、見えている範囲が同じなので、
これはなしですよね。

iframeを使うのもなしです。Google mapsは使っていませんよね。

どなたかアドバイスしていただける方はいないでしょうか。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2011/05/30 21:36

google mapsを調べてはいませんが、画像の一部を表示しておいて、その表示位置が移動できればよいということだと解釈しました。

大きな画像の親要素にサイズを設定しoverflow:hiddenにしておくことで部分表示が可能になります。
その上で画像用をの表示位置をtop、leftなどで制御してあげればよいのではないでしょうか？

例えば
<div id="map_frame">
　<img src="Map.jpg" alt="map">
</div>
というマークアップに対して、CSSで
#map_frame{
　position:relative;
　width:300px;
　height:300px;
　overflow:hidden;
}
#map_frame img {
　width:1000px;
　height:1000px;
　position:absolute;
　top:-300px;
　left:-300px;
}
みたいな方法で画像の一部分を表示できますので、これに画像の位置をスライドさせるようなUIを追加してあげればよろしいかと。
（最終的には、画像のtop、leftを制御してあげればよい）

同じような方法ですが、CSSのclipを利用しても同様のことが可能です。
http://w3g.jp/css/display_position/clip
http://www.htmq.com/style/clip.shtml


googleの場合も表示に関しては、多分、似たような方法ではないかと想像します。
表示するための地図が大きいので、全体をあらかじめ沢山の矩形に分割してあって表示に必要な部分を読み込んで張り合わせて表示しているようです。ドラッグなどで移動してその読み込んであるデータの範囲外に出ると、Ajaxでデータを追加取得しているように思われます。（推測なので、確認はしていません）

この回答へのお礼

ありがとうございます。大変参考になりました。

お礼日時：2011/05/31 05:27