css - jquery mobile中的谷歌地图

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;
}

这对我来说非常有效。

Answer 4

对我有用的快速而肮脏的修复：

$('[data-role=content]')
  .height(
    $(window).height() - 
    (5 + $('[data-role=header]').last().height() 
    + $('[data-role=footer]').last().height())
  );
// tell google to resize the map
google.maps.event.trigger(map, 'resize');