jquery mobile中的google地图 [英] google maps in jquery mobile

问题描述

当在jquery mobile中显示google地图时（看完论坛后），需要以下代码：

When showing a google map in jquery mobile it appears (after reading the forums) that code like the following is required:

<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， 。我希望在地图下面（基于的内容）获得一些动态文本，其长度我不知道，所以我不能设置绝对高度。有没有人为这个问题找到解决方法？

Taking away the height on outside div causes the div to drop to height 0 and the map not being displayed. I was hoping to get some dynamic text below the map (based on the contents on the) which length I do not know so I can't set an absolute height. Has anyone got a workaround for this problem?

推荐答案

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

This is not a Google maps related issue, the thing is, you need to SET a specific width and height for your Map canvas, your code could be rewritten like:

<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 插件。

UPDATE: Have a look @Blowsie comment, you may also check the jquery-ui-map plugin.

这篇关于jquery mobile中的google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！