时间戳

首页 > 解决方案 > Google Maps API：地图高度问题

google-maps-api-3 - Google Maps API：地图高度问题

问题描述

在 Google 最近对其 API 进行更改之后，我不得不重新处理所有涉及地图的页面。经过几个小时的工作，一切都恢复了，只有几个琐碎的问题。这是第一个：

在某些页面上，我在浮动框（www.floatboxjs.com）中打开地图，并带有以下行

<a href="../maps/map_hotel.php?<?php echo "hid=".$hid ?>" class="floatbox locmap" data-fb-options="caption:`<?php echo $row_hotel['hotel'];?>` scrolling:no">See location map</a>

然后 map_hotel.php 由正文中的单个 div 组成。如果我将该 div 的高度指定为百分比，则地图不会显示。

html {height:100%}
body{height:100%;margin:0;padding:0}
#mapCanvas {height:100%;}
table.infowin, table.infowin tr, table.infowin td{margin:0;padding:0;border:0;background-color:#FFF;color:#666}
table.infowin td.pic{vertical-align:top}
td.pic img{margin-bottom:4px;border:none}
a{text-decoration:none}
.hotel{font-size:1.2em;font-weight:bold;color:#3498db}
.gm-style-iw{padding:6px;width:230px !important;border:1px solid #666;background-color:#fff}

如果我以像素为单位指定高度，它确实如此。为什么会这样？鉴于将用于查看它的设备种类繁多，固定高度是非常不令人满意的。

标签： google-maps-api-3

解决方案

我找到了解决方案：我将 Floatbox 从版本 7.5.1 更新到 8.1.1，问题就消失了。我在 Floatbox 更改日志中找不到任何内容表明它可以克服这个问题（它只是在我被迫做出的更改中才出现），但它确实做到了。

推荐阅读