升級到jquerymobile 1.2後谷歌地圖不全屏

以下例子屬於Tolis Emmanouilidis，適用於jquerymobile 1.0.1。當我想升級到1.2.0時，地圖不是全屏，只有一部分顯示在框架的左上角升級到jquerymobile 1.2後谷歌地圖不全屏

互聯網充滿了jquerymobile和谷歌地圖的例子。升級到jqm 1.2.0之後地圖有這個問題，並且沒有太多關於這個話題的來源。

你能幫我解決這個問題嗎？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Page Title</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=el"> </script> 
    </head> 

    <body> 
     <!-- /page --> 
     <div data-role="page" class="page-map" style="width:100%; height:100%;"> 
      <!-- /header --> 
      <div data-role="header" data-theme="b"> 
       <h1>Map</h1> 
       <a href="page_1_intro.html" id="home" rel="external" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Home</a> 
      </div> 
      <!-- /content --> 
      <div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;"> 
       <div id="map_canvas" style="height:350px;"></div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-12-11 user1636051

這應該解決您的問題：

$('#map').live('pagebeforeshow',function(e,data){ 
    $('#map_canvas').height($(window).height() - (10 + $('[data-role=header]').height() - $('[data-role=footer]').height())); 
});

來源

2012-12-11 16:12:36 Gajotres

謝謝Gajotres，我解決了，當我使用jquery.ui.maps。重要的是不要使用寬度：100％的畫布風格。相反，調整畫布上pagebeforeshow事件（解決方案）非常感謝你

– user1636051

此作品一種享受，謝謝:)只是爲別人的利益，不要忘記更改$（「＃圖」） .live到您的頁面名稱ID – Garbit

升級到jquerymobile 1.2後谷歌地圖不全屏

回答

相關問題