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 并且 map 不会显示。我希望在 map 下方得到一些我不知道长度的动态文本(基于上面的内容)，所以我无法设置绝对高度。有人有解决此问题的方法吗？

Answer 1

这不是 Google map 相关的问题，问题是，您需要为 map Canvas 设置特定的宽度和高度，您的代码可以重写为:

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

Example link

---

更新:看看@Blowsie 评论，您也可以查看 jquery-ui-map插件。