jquery 移动版中的谷歌地图

Question

当在 jquery mobile 中显示 google 地图时（阅读论坛后），需要如下代码：

<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

这不是与 Google 地图相关的问题，问题是，您需要为地图画布设置特定的宽度和高度，您的代码可以重写为：

<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');