iT邦幫忙

0

如何在Web上設計一個能拖拉的地圖

因為最近專題需要
實在也不知到這個問題要怎麼查

想做一個n*n以方格組成的格子地圖
每個格子點擊都會定義事件發生
由於地圖太大會超出螢幕
想用滑鼠拖曳地圖
而使整張地圖都能用這個方式顯示
但我不知道怎麼做才能更新螢幕以外的部分
(PS 就好像google地圖那樣 往旁邊移會更新還沒載入的地圖)

拜託知道怎麼做的大大幫小第解答

2 個回答

2
fillano
iT邦超人 1 級 ‧ 2014-04-11 13:49:22
最佳解答

首先要設一下CSS,可以用google查詢overflow:hidden,瞭解一下他的效果及使用方式。用這個,可以讓地圖只顯示要顯示的部份。

另外,就要看你要顯示地圖的特性了。如果不是非常大,也許可以考慮直接用一張大圖來拖拉。如果是要做類似game的地圖,也可以用固定長寬的小圖,用div拼成大圖來拖拉。

如過地圖更大或是無限大(連續拼接,類似google map),那要考慮切割地圖,然後只在顯示區域內載入要顯示的部份。不過這樣用div拼會比較複雜,也許可以考慮用canvas來做,然後根據拖拉的座標,把圖片畫到canvas中。

哦哦哦真是太感謝了 有個方向之後問題也比較好解決

2
丁丁 (Dean)
iT邦大師 6 級 ‧ 2014-04-11 01:10:29

請參考教學文
Google Maps API輕鬆入門

我要發表回答

立即登入回答