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

Question

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

SAS*_*ASM 4 html css jquery google-maps-api-3 jquery-mobile

地图在添加之前正确显示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>

Run Code Online (Sandbox Code Playgroud)

我的自定义CSS

html { height: 100% }

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

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

Run Code Online (Sandbox Code Playgroud)

否则我使用默认值jquery.mobile-1.3.1.min.css.我可能知道它可能是因为CSS,但无法弄清楚.

Answer 1

Gaj*_*res 5

您需要更改自定义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;     
}

Run Code Online (Sandbox Code Playgroud)

此处也描述了该解决方案.

归档时间：	12 年，4 月前
查看次数：	2883 次
最近记录：	12 年，4 月前