css – google地图在jquery手机

前端之家收集整理的这篇文章主要介绍了css – google地图在jquery手机前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当在 jquery手机中显示谷歌地图时,会出现(阅读论坛后)需要以下代码
<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,并且地图不显示.我希望在地图下方获取一些动态文本(根据内容)我不知道的长度,所以我无法设置绝对高度.有没有人有这个问题的解决方法

解决方法

这不是Google地图相关的问题,事情是,您需要为您的Map画布设置一个特定的宽度和高度,您的代码可以重写为:
<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插件.

猜你在找的CSS相关文章