的Javascript jQuery的地圖增值的

類似的問題已經被問過，但也有一些是我所需要的所有其他地圖迪不要求：的Javascript jQuery的地圖增值的

我如何設計一個可拖動地圖，而不是一個有限的區域，但與巨大其中一部分需要在拖動過程中重新加載？

我應該使可拖動的div有多大？一直到整個潛在的地圖？或者只比可見區域稍大，然後用動態偏移重新加載滾動到視圖中的部分？

在此先感謝！

編輯：重裝的部件（被滾動到視圖中）需要從服務器重新加載。這是一張1000x1000的地圖，可見區域只有9x9。

2011-11-06 arik

好吧，夥計們，看到沒有人願意回答這個問題：我找到了解決辦法。

知道了地圖的大小，它不會造成什麼樣的性能問題，使用背景DIV與相應的尺寸，像15,000x15000px甚至更多。只需創建一個父容器，將其設置爲overflow: hidden;並將該巨大的地圖放入其中。最好將其位置設置爲絕對值，並通過調整邊距來移動它。可以通過JavaScript輕鬆修改頁邊距和頁邊距屬性。

另外，那個巨大的div可以有子元素。創建一個定位爲relative -ly的子元素，並使用您想要在地圖上顯示的任何內容填充相關元素，計算項目相對於世界左上角的距離。移動地圖時，您可以檢查邊距是否超過了某個點，如果有，則通過AJAX重新加載這些元素。

您的代碼看起來或多或少像：

<div id="viewport" style="overflow: hidden;"> 

    <div id="map" style="position: absolute; width: 15000px; height: 15000px;"> 

     <div id="container" style="position: relative;"> 

      <div id="element_1" style="position: absolute; top: 70px; left: 100px; width: 10px; height: 10px;"></div> 
      <div id="element_2" style="position: absolute; top: 90px; left: 80px; width: 10px; height: 10px;"></div> 
      <div id="element_3" style="position: absolute; top: 60px; left: 10px; width: 10px; height: 10px;"></div> 
      <div id="element_4" style="position: absolute; top: 20px; left: 20px; width: 10px; height: 10px;"></div> 
      <div id="element_5" style="position: absolute; top: 50px; left: 50px; width: 10px; height: 10px;"></div> 

     </div> 

    </div> 

</div>

這將是要顯示的元素container，你會然後通過AJAX重新飼料與任何具有對應的map保證金。

來源

2011-11-25 20:13:43 arik

的Javascript jQuery的地圖增值的

回答

相關問題