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 +谷歌地图/错误高度

回答

相关问题