jquery mobile +谷歌地圖/錯誤高度

唉用下面的代碼它不起作用 - 只有地圖的一部分是可見的，在頭上。也許有人可以幫忙？jquery mobile +谷歌地圖/錯誤高度

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Map 2.0</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile /1.0/jquery.mobile-1.0.min.css" /> 
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script type="text/javascript" src="js/map.js"></script> 
</head> 
<body> 
    <div data-role="page" id="map_page"> 

     <div data-role="header"> 
      <h1> 
       Map 
      </h1> 
     </div> 

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

    </div> 
    </body> 
</html>

JS：

$("#map_page").live("pageinit", function() { 

    var myOptions = { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
})

CSS：

html { height: 100% } 
body { height: 100%; margin: 0px; padding: 0px } 
#map_canvas { height: 100% }

電賀

@Omar：我想您的建議修改代碼，但它仍然無法正常工作。也許我忽略了一些東西？

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Map 2.0</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script type="text/javascript" src="js/map.js"></script> 
</head> 
<body> 
    <div data-role="page" id="map_page"> 

     <div data-role="header"> 
      <h1> 
       Map 
      </h1> 
     </div> 

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

    </div> 
</body> 
</html>

JS：

$("#map_page").on("pageshow", function() { 

    var myOptions = { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
})

CSS：來自德國&

html { height: 100% } 
body { height: 100%; margin: 0px; padding: 0px } 
#map_canvas { height: 100% }

迎接摩洛哥

來源

2013-05-19 Gi Joe

在腦海中，在谷歌地圖之前加載jquery mobile。而不是'pageinit'嘗試'pageshow'。總是使用'.on'而不是'.live'。另外，對'content' div中的地圖使用單獨的div。 – Omar

@Omar唉它仍然無法正常工作，請參閱我更新的問題。 –

使用jQuery Mobile 1.3.1，使用jQuery 1.9.1'' – Omar

這裏有一個工作示例：http://jsfiddle.net/Gajotres/7kGdE/

地圖頁面必須在pageshow事件期間進行初始化，因爲只有在此時才能計算正確的高度。

還可以使用此功能是必要的：

function getRealContentHeight() { 
    var header = $.mobile.activePage.find("div[data-role='header']:visible"); 
    var footer = $.mobile.activePage.find("div[data-role='footer']:visible"); 
    var content = $.mobile.activePage.find("div[data-role='content']:visible:visible"); 
    var viewport_height = $(window).height(); 

    var content_height = viewport_height - header.outerHeight() - footer.outerHeight(); 
    if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) { 
     content_height -= (content.outerHeight() - content.height()); 
    } 
    return content_height; 
}

它用於根據可用的高度，頁眉和頁腳的高度來設定正確的內容的高度。如果你看看這個ARTICLE你會發現更多的信息和幾個例子。

來源

2013-05-19 11:48:23 Gajotres

謝謝，現在可以使用了！ –

成就了我的一天。謝謝！ –

jquery mobile +谷歌地圖/錯誤高度

回答

相關問題