爲什麼我必須重新加載頁面才能正確顯示地圖？

我問這個問題已經here，不幸的是問題不能解決，所以我問這裏:)爲什麼我必須重新加載頁面才能正確顯示地圖？

我有一個JQM頁面，其中我顯示了一張地圖。愚蠢的是，要正確顯示地圖，我必須重新加載頁面。

這是地圖上如何顯示在頁面的第一負載： Site before reload

，這是它如何被刷新頁面後顯示： Site before reload

這裏是我的代碼：

var map; 
    require([ 
       "esri/map", 
       "dojo/dom", 
       "esri/layers/ArcGISTiledMapServiceLayer", 
       "dojo/domReady!" 
      ], 
      function (Map, dom, Tiled) { 
       map = new Map("map", { 
        logo: false, 
        minZoom: 1, 
        maxZoom: 11 
       }); 
       var luftbild = new Tiled(URL); 
       map.addLayer(luftbild); 
    });

這就是我怎樣稱呼地圖：

<style> 
    html, body, #map { 
     padding: 0; 
     margin: 0; 
     height: 100%; 
    } 
</style>

我該如何顯示它：

<div data-role="page" style="background-color:red" ...> 
    <!--Header--> 
     .... 
    <!--/Header--> 
    <!--Content--> 
     <div id="map"> 
     </div> 
    <!--/Content--> 
</div>

編輯：

把行此代碼後：

$(document).on("pageshow","#page",function(){ // initialize map and show 
});

地圖現在看起來是這樣的： enter image description here

是否有可能將寬度和高度設置爲100％？

來源

2014-10-16 minimen

如果直接轉到該地圖是將它正確地顯示無需重新加載鏈接？你也可以看看這個答案，看看它是否有幫助http://stackoverflow.com/a/17676873/2220391 – Spokey 2014-10-16 12:06:59

是的，它確實加載 – minimen 2014-10-16 12:11:01

你可以顯示你如何加載腳本？ – Spokey 2014-10-16 12:33:07

地圖需要一個定義寬度和高度的畫布。在Jquery移動頁面處理頁面不同於普通的html頁面。即一個頁面（即具有data-role = page的div）一次是可見的，而另一個則不是。所以，在任何網頁上初始化地圖應與jQuery Mobile的特定頁面的事件做稱爲pageshow

$(document).on("pageshow","#page",function(){ // initialize map and show 
});

來源

2014-10-16 12:42:03

爲什麼我必須重新加載頁面才能正確顯示地圖？

回答

相關問題