2

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

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

来自德国和摩洛哥的问候

4

2 回答 2

6

这是一个工作示例：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;
}

它用于根据可用高度、页眉和页脚高度设置正确的内容高度。如果你看一下这篇文章，你会发现更多的信息和几个例子。

于 2013-05-19T11:48:23.710 回答
0

我有一个类似的问题：页面有页眉和页脚，而中间的谷歌地图更大，因此它的一部分在页脚后面。这只发生在第一次启动应用程序或清空缓存然后使用谷歌地图重新加载页面时。

我还遇到了在 .ready 区域设置谷歌地图的陷阱。那时页面的页眉和/或页脚高度可能会返回 0，因此显示谷歌地图的空间计算得太大，因此部分隐藏在页脚后面。这可以通过页面的设置最小高度来检查（由 JQuery Mobile 完成）。JQuery Mobile 负责调整大小，并在调整 PC 或移动设备上的浏览器大小时使用谷歌地图正确调整页面大小（旋转 90 度）。因此，设置一个固定的高度可能会导致以后错误的调整大小。我建议最初在 .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）上进行了测试

于 2019-09-15T14:28:43.017 回答