Question

唉，使用以下代码它不起作用 - 只有一些地图可见，在标题处。也许有人可以帮忙吗？

<!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% }

来自德国的问候＆amp;摩洛哥

Answer 1

以下是一个工作示例：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 ，您会发现更多信息，但很少有例子。

Answer 2

我有一个类似的问题：页眉和页脚的页面，而中间的google maps较大，因此页脚后面的一部分。仅在首次启动应用程序或清空缓存，然后使用Google地图重新加载页面时才会发生这种情况。

我也遇到了在.ready区域设置google maps的陷阱。那时页面的页眉和/或页脚高度可能返回0，因此显示Google地图的空间太大，因此部分隐藏在页脚后面。可以通过页面的设置最小高度（由JQuery Mobile完成）进行检查。 JQuery Mobile负责调整大小，并会在调整PC或移动设备上的浏览器大小（旋转90度）时使用Google Maps适当调整页面大小。因此，将高度设置为固定值可能会导致以后调整大小错误。我建议首先在.ready区域中设置min-with：

// Timeout ensures header/footer height are set
setTimeout(function() {
    $('#yourPageId').css('min-height', ($(window).height() - $('#yourHeaderId').height() - $('#yourFooterId').height() +1) + 'px');
}, 200);

当然，您可以通过将代码放入“ pageshow”事件（具有正确的页眉和页脚高度）中来避免超时，但是在每次打开页面时（多页项目中的fe）它都会触发，而JQuery Mobile具有自己的重置高度的代码（正确）。

也在移动设备（Chrome，Firefox，Safari）上进行了测试

jquery mobile + google maps /错误的高度

2 个答案: