添加 jquery 移动面板后，Google 地图无法正确显示答案

【问题标题】：Google Map not displaying correctly after adding a jquery mobile panel添加 jquery 移动面板后，Google 地图无法正确显示
【发布时间】：2013-07-23 05:14:51
【问题描述】：

在添加 panel 之前，地图显示正常。现在，只要我在页面上添加panel div，地图就会像这样显示：

它只是在顶部杂乱无章，在下面留下了很大的空间。图像左上角的按钮用于打开可以正常打开的面板。抱歉，图像工作不完整。

html如下：

<body>

    <div data-role="page" id="map-page" data-url="map-page">

        <div data-role="panel" id="mypanel">
            <!-- This is the problematic panel-->
        </div><!-- /panel -->

        <div data-role="header">
            <a href="#mypanel" data-role="button" data-icon="bars" data-iconpos="notext">Choose Station</a>
            <h1>The Header</h1>

            <a href="index.html" data-ajax="false" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh</a>
        </div><!-- /header -->

        <div data-role="content" id="map-canvas"> <!--Div for map display.-->
        </div><!-- /content -->

        <div data-role="footer" data-id="myfooter" class="ui-bar" data-position="fixed">
            <h4>© 2013</h4>
        </div><!-- /footer -->

    </div><!-- /page -->
</body>

我的自定义 CSS

html { height: 100% }

body { height: 100%; margin: 0; padding: 0 }

#map-page, #map-canvas { height: 100% }

否则我使用默认的jquery.mobile-1.3.1.min.css。我可能知道这很可能是因为 css，但无法弄清楚。

【问题讨论】：

尝试将地图画布放在内容 div 中。换句话说，保持内容 div 不变。
你的意思是这样<div data-role="content"><div id="map-canvas"> </div></div>。在这种情况下，地图根本不显示。
那么你需要在pageshow上显示地图，设置内容div的高度。
我创建地图和标记的所有逻辑都在pageinit 中。您能否提供一个快速提示如何做到这一点？
尝试将pageinit 替换为pageshow 并将其绑定到#map-page。 $(document).on('pageshow', '#map-page', function ().

标签： jquery html css jquery-mobile google-maps-api-3

【解决方案1】：

您需要更改您的自定义 CSS。在这个工作示例中，我使用了您的 HTML 页面并修改了它的 CSS。你这里的主要问题不是面板，至少不是直接的。面板高度会导致页面内容 div 丢失行为，可以使用下面使用的 CSS 修复。

这是一个工作示例：http://jsfiddle.net/7kGdE/105/

CSS：

#map-canvas {
    padding: 0;
    position : absolute !important; 
    top : 40px !important;  
    right : 0; 
    bottom : 40px !important;  
    left : 0 !important;     
}

这个解决方案也被描述为HERE。

【讨论】：

确实如此。完美工作。感谢您提供整洁的代码。并为您的内容丰富的博客 +1。
是的，它奏效了。我用它来修改 top:0px;和底部：0px；用于全屏显示。谢谢@Gajotres