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

问题描述

当在 jquery mobile 中显示谷歌地图时，它出现(阅读论坛后)需要如下代码:

<div data-role="header"><h1>地图页面</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 下降到高度 0 并且地图不显示.我希望在地图下方获得一些动态文本(基于地图上的内容)，我不知道其长度，因此我无法设置绝对高度.有没有人有解决这个问题的方法?

解决方案

这不是谷歌地图相关的问题，问题是，你需要为你的地图画布设置一个特定的宽度和高度，你的代码可以像这样重写:

<div data-role="header"><h1>地图页面</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 结论emque pro et, sint aperiam vel at.没有 postea scaevola vivendum duo, et vix erant paulo.Ex fuisset Perfecto vix.没有坐 laudem noster scriptorem, probatus assueverit ius cu.</p>

示例链接

<小时>

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

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>

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?

解决方案

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>

Example link

---

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

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