Google Maps Infobox Autopan问题

时间:2012-08-16 19:37:21

标签: javascript google-maps google-maps-api-3 infowindow

我在使用信息框时遇到了一些问题 - http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/reference.html - 它没有考虑我在布局中的标题和侧边栏。当有人点击标记并显示信息框时,它不会自动从标题和侧边栏下方(它们位于100%宽度/高度Google地图上方)自动平移,以便您可以看到它。

当我使用普通的Infowindows(以及可以隐藏的侧边栏)时,我的工作非常完美,但我想使用Infobox来更好地控制风格/外观。为了做到这一点,我找到了这个问题的第二个答案 - Ensure padding around markers on Google Maps for web - 并使用div并将其作为控件应用于地图。

这是问题的JSFiddle - http://jsfiddle.net/nrjBB/

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:0)

从你的html中删除标题div,它将正确平移。听起来你的CSS错了。

试试这个:

HTML:

<div id="header"></div>
<div id="map_canvas"></div>
<div id="sidebar"></div>

css:

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; }
#header { width: 100%; height: 50px; background: #000; }
#sidebar { width: 100px; height: 100%; background: #999; position: absolute; top: 0; right: 0; }

.info-box { background: #ffffff; }

PS:感谢您将代码放在这里!我正在寻找一个loooong时间的信息框信息!!!

答案 1 :(得分:-1)

要么你必须把map_canvas的高度(heightOfWindow -50),因为infowindow将根据map div进行平移,在你的情况下,map div被标题隐藏