Google地圖與jquery.mobile：如何正確調整地圖畫布的大小？

我正在寫一個需要地圖的jquery移動應用程序。Google地圖與jquery.mobile：如何正確調整地圖畫布的大小？

對於地圖我計劃使用Google地圖服務。

爲了考慮方向的變化，我試圖用這樣的：

<script> 
$('#page-map').live('pagecreate', function(event) { 
    var map = $('#map_canvas').gmap({ 
     ... 
    }); 
    ... 
    $(window).resize(function() { 
     $('#map_canvas').width($(window).width()); 
     $('#map_canvas').height($(window).height()); 
    }); 
)}; 
</script>

問題：這段代碼正確調整大小時，該設備被旋轉的地圖畫布，但它看起來像jQuery Mobile的調整大小（）是跳過（網址欄可見，例如...）。

即使不添加到「調整（函數（）{」的代碼是這樣的：

google.maps.event.trigger(map, 'resize');

是任何幫助

更新： 問題只發生在僅移動設備我正在測試我的頁面 - 一個三星Galaxy Mini（GT-S5570），Android 2.3.4（薑餅）。它確實不是發生在桌面PC上調整窗口大小時（即：在桌面瀏覽器map_canvas是正確的當瀏覽器的窗口放大時填充，即使沒有È調整大小（）結合，只由於在上map_canvas提供100％的寬度/高度...）

來源

2012-08-31 MarcoS

我通過CSS分配一個大小到我的地圖中的jquery移動
我添加map_canvas提供內分度dimencion deuin想在這種情況下，100％

CSS

#map_content { 
padding: 0px; 
width: 100%; 
height: 100%; 
overflow: hidden;} 


#map_canvas { 
width: 100%; 
height: 100%; 
padding: 0; 
text-shadow: none;}

HTML

  <div data-role="content" id="map_content" data-theme="a"> 
      <div id="map_content"> 
       <div id="map_canvas"></div> 
      </div> 
     </div>

來源

2012-08-31 17:58:10

如果當窗口大小發生變化時（例如，因爲設備將方向從縱向更改爲橫向），您不調整#map_canvas的大小，地圖將不會填充地理數據，窗口右側會留下空白條帶... – MarcoS

對不起：您是否使用移動設備？如果是這樣，CSS如果足以讓您在方向更改時填充map_canvas（並且隱藏了url欄）？如果是這樣，我可以問一下我們的設備（iPhone/Blackberry/Android/...）嗎？ – MarcoS

我試過上面的答案（加上其他許多），沒有爲我工作。實際上，上面的代碼爲我工作，但直到我開始使用jQuery Mobile。不知何故，當我加載jQuery Mobile（有趣的是，我注意到它是JS，沒有CSS），map_canvas沒有高度（檢查元素高度的技巧是像border: 1px solid red;那樣添加邊框）。

最終，我成功地解決了自動調整大小時，通過使用下面的代碼/ CSS的方向變化：

<div data-role="page" id="pageID"> 
    <div role="main" class="ui-content"> 
     <div id="map_canvas"> 
     </div> 
    </div> 
</div>

並在CSS：

html, 
body, 
#pageID { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.ui-content { 
    padding: 0; 
} 
.ui-content, 
.ui-content #map_canvas { 
    height: inherit; /* the trick */ 
}

所以，基本上是： height: inherit;爲我解決了這個問題。

現金https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250

我希望它能幫助！

來源

2015-04-12 13:52:45

Google地圖與jquery.mobile：如何正確調整地圖畫布的大小？

回答

相關問題