谷歌地圖算法（Ajax，瓷磚等）

我正在研究一個應用程序，它可以像Google地圖一樣顯示大圖像。當用戶拖動地圖時，會加載更多圖像，以便當地圖的新部分可見時，相應的圖像已經就位。谷歌地圖算法（Ajax，瓷磚等）

順便說一下，這是一個Javascript項目。

我正在考慮將每個圖塊表示爲一個正方形的div，並將圖像作爲背景圖像加載。

我的問題：我該如何計算divs顯示的內容，以及何時移動了貼圖，如何知道何時可以看到新的div行？

謝謝！

2011-08-27 rodrigo-silveira

關於計算divs顯示的內容：學習交叉兩個矩形的算法（stackoverflow問題Algorithm to detect intersection of two rectangles?是一個很好的起點）。因此，顯示的div是與「查看窗口」的交集非空的那些。

關於告訴當新的div行已經變得可見時：無論如何你可能需要一個updateInterface（）方法。使用此方法跟蹤顯示的div，以及在進入視圖窗口之前未顯示的div時，觸發一個事件處理程序。

關於實現：您應該可能有視圖窗口本身是一個溢出的div：hidden和position：relative。在CSS中擁有相對位置屬性意味着絕對位置最高的0，左邊0的子將位於容器的左上角（在您的情況下爲視圖區域）。

關於效率：取決於您「確定哪些div顯示」算法結束的速度有多快，您只能在用戶停止拖動而不是鼠標移動時嘗試處理交集檢測。您還應該在當前視圖窗口周圍預先加載區域，以便在用戶沒有拖得太遠的情況下，它們將會被加載。

一些進一步的參考：

來源

2011-08-27 14:16:45

感謝您的回覆。迄今爲止非常有用的東西。澄清一下，這個個人項目只是我認爲只是爲了好玩而已。我一直在研究GWT，現在我想編程一個應用程序更多的參與，只是爲了讓我能夠掌握它並獲得GWT中的Hello world世界的東西。我真正想要映射的是來自視頻遊戲的關卡。像這樣的http://goo.gl/t3eQF，但是按需加載磁貼，而不是一次加載整個地圖（即使在這個特殊的例子中，從精靈表中一次加載所有東西，可能更容易解）。 –

嗨@EqSum，歡迎來到堆棧溢出！我很高興你找到答案有用= D。大家知道，通過點擊答案旁邊的大數字上方的箭頭，您可以找到有用的答案，並「接受」解決問題的答案（如果適用）。這是人們貢獻出好答案的動機=）。 –

關於您的問題，請務必在我的回答中查看第二個鏈接的演示！ –

沒有理由以自己實現，真的，除非它只是一個有趣的項目。有幾個處理在線映射的開源庫。

要回答你的問題，你需要有一個正射影像類型的圖像（圖像與座標空間對齊），然後從像素座標（即屏幕）到世界座標的映射。如果它不是地圖圖像，那麼只是任意大的圖像，然後，您需要在各種縮放級別的源圖像的像素座標與視口的座標之間創建映射。

如果您閱讀Google Map的SDK文檔，您將看到對這些術語的解釋。探索上述現有庫之一，閱讀其文檔並瞭解它是如何完成的也是一個好主意。

但是，如果這是真正的工作，請不要自行實施。沒有理由。

來源

2011-08-27 14:24:56

我認爲從他的問題我們不能真正推斷出他的問題是地理問題，所以如果沒有一些調整，映射庫可能不會非常有用。但我同意應該使用現有解決方案（不包括學習目的）。 –

谷歌地圖算法（Ajax，瓷磚等）

回答

相關問題