jquery mobile中的谷歌地图

Posted 2023-02-23

【中文标题】jquery mobile中的谷歌地图

【英文标题】：google maps in jquery mobile

【发布时间】：2011-06-02 05:25:03

【问题描述】：

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

【参考方案1】：

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

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

【讨论】：

这里的问题是没有办法让地图填满所有设备的屏幕。

我不是移动 Web 开发方面的专家，但我想应该有关于检测移动屏幕尺寸的文章，比如 this 文章？这样您就可以根据设备应用不同的样式

如今智能手机的屏幕有很多不同尺寸，因此为每个屏幕制作一个 CSS 意味着我必须在这些设备中的每一个上进行测试，同时制作特定于设备的 CSS 也不是什么好习惯.

您可以使用 width:100% 轻松将此地图全屏显示； height:100% 并将父 div 作为 position:absolute;top:0;left:0;对：0；底部：0； - 这是在任何设备上实现全屏的非常常见的做法，如果失败，创建一个 js 解决方案超级简单

@Blowsie：像魅力一样工作。但由于position 是absolute，所以需要添加top:XXpx; 来占标头。

【参考方案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; 

【参考方案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;

这对我来说非常有效。

【参考方案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');

【讨论】：

您可以添加更多上下文吗？您在页面生命周期中的哪个位置调用它？

已经很久了，我没有代码了，但我相信这是在谷歌地图的加载事件和方向改变时调用的。