谷歌地图在jquery移动

Question

当在jquery mobile中显示谷歌地图时,它(在阅读论坛后)显示需要以下代码:

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map Page</h1></div>
    <div data-role="content" style="width:100%; height:100%; padding:0;"> 
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>

取消外部div的高度会导致div降至高度0并且不显示地图.我希望在地图下面得到一些动态文本(根据内容)我不知道哪个长度,所以我不能设置绝对高度.有没有人有这个问题的解决方法？

Answer 1

这不是谷歌地图相关的问题,事实是,你需要为你的地图画布设置一个特定的宽度和高度,你的代码可以重写如下:

<div data-role="page" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map Page</h1></div>
    <div data-role="content" style="padding:0;">
        <div id="map_canvas" style="width:300px; height:300px;"></div>
      <p id="text">Lorem ipsum legere facilisi conclusionemque pro et, sint aperiam vel at. No postea scaevola vivendum duo, et vix erant paulo. Ex fuisset perfecto vix. No sit laudem noster scriptorem, probatus assueverit ius cu.</p>
    </div>
</div>

示例链接

更新:看看@Blowsie评论,你也可以查看jquery-ui-map插件.

Answer 2

这里有一个官方的例子:http://view.jquerymobile.com/master/demos/examples/maps/geolocation.php

HTML:

<div data-role="page" class="page-map">
    <script src="map.js"></script>
    <link rel="stylesheet" href="map.css" />

    <div data-role="header"><h1>Map View</h1></div>
    <div data-role="content"> 
        <div id="map-canvas">

            <!-- map loads here... -->
        </div>
    </div>
</div>

CSS:

.page-map, .ui-content, #map-canvas { width: 100%; height: 100%; padding: 0; }

Answer 3

那么在这里我是如何做到的,它对我有用.

<div data-role="page" id="atm" data-theme="b">
<div data-role="header" data-theme="b" data-position="inline" class="classHeader"> 
        <a href="#home" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-home">Options</a>
        <h1>Location</h1>
    </div>

    <div data-role="content" id="map_canvas"></div>

    <div data-role="footer" data-position="fixed" data-theme="b" class="classFooter">
        <h1>Copyright © 2011.</h1> 
    </div>

</div>

然后将这些添加到CSS文件中.

.classHeader{
height:10% !important;
}

.classFooter{
height:10% !important;
}

#map_canvas{
padding-top:10%;
padding-bottom:10%;
height:auto;
position:absolute;
width:100%;
height:88%;
max-height:1600px;
overflow:hidden;
display:block;
}

这对我来说非常合适.