Google地图无法在网页上完全呈现？

Question

我的页面上有一个谷歌地图,我自己建立了一个可以随意显示和隐藏的搜索窗格.它涵盖了像一边说地图的200像素.问题在于,当我调整地图大小时,窗格重叠的区域是未渲染的,即地图因某些原因无法渲染.

看看这个链接

在Box类型中,假设OMDB是机场的icao代码,然后按回车键.

显示结果,您将看到窗格.现在点击全屏链接,然后单击机场选项卡以使面板消失 - 您现在看到地图的一部分根本没有渲染...我必须拖动地图并且仅部分渲染那个地区.我该如何解决？

仅供参考我在Windows XP上运行Google Chrome,Firefox和IE8.有没有办法强制完成地图的渲染？这是一个非常不稳定的问题,它可能与我的代码有关,还是主机问题？或谷歌只是不喜欢我？:(

编辑:看到旁边的丑陋补丁.它的未渲染区域也应该渲染地图.没有任何放大和平移有助于清除这个:(

Answer 1

我无法重现您遇到的问题,但它看起来类似于我在google地图中看到的另一个问题.

看起来你可能会与谷歌地图确定哪些瓷砖在视野中的方式相冲突.它只计算一次,当第一次将地图加载到div中时,如果div增长,则不会绘制足够的地图.幸运的是,这很容易处理.在容器可能已调整大小的任何时候,checkResize()在地图实例上使用该方法,并且将从容器的当前大小重新计算剪切区域.

Answer 2

是的,你必须提供容器DIV的实际像素高度和宽度.这实际上在Google API中有详细说明.

通过使用这样的东西:

<div id="map_canvas" style="width:500px;height:500px;"></div>

代替

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

你会在家免费!

Answer 3

据我所知,它在Google Chrome中的OS X 10.6.2上运行良好.

http://i33.tinypic.com/sfe3ah.png

唯一的问题是哥本哈根机场远离您的应用所在的位置.洛杉矶正处于海洋中;-)

编辑:
我看到了您的屏幕截图,在我看来谷歌地图不会呈现搜索和搜索结果窗格所覆盖的地图部分,然后在隐藏搜索窗格时未正确触发渲染.

我无法在Google Maps API中找到合适的渲染触发器,但我认为您应该尝试以编程方式放大或缩小地图或将地图中心移动到其他地方并返回,以便强制重新启动 - 渲染地图.

或者,您可以尝试手动触发一些您认为可能会导致重新渲染地图的事件google.maps.event.trigger(map, 'resize').

我知道这些建议感觉像是一种可怕的黑客攻击方式,并且我非常不确定它是否会起作用,但它是我最好的镜头;-)