灰色框出现在模式框中的嵌入式Google Map的部分中

Question

我在使用模式框中的v3 API嵌入Google Map时遇到问题.

显示模态时,灰色框出现在地图画布中.调整浏览器窗口大小,调出Web Inspector等会使所有地图图块都可见,即它"强制重新渲染"地图.

map元素的父元素(section#map-modal参见下面的代码)display: none在页面加载时设置了CSS.display: block单击show按钮时,JS模态代码会自动设置.如果我暂时display: none从模态元素中删除,则地图在页面刷新时正确呈现.谷歌地图喜欢隐藏的父元素吗？

我正在使用Twitter的Bootstrap模态jQuery插件,并使用CSS控制模态本身.它是固定的,有像素宽度等.没什么不寻常的.

我当然用谷歌搜索解决方案,许多人指出触发resize事件的Google API方法:

google.maps.event.trigger(map, 'resize');

我确实这样做了,但无济于事.

相关代码:https://gist.github.com/1591488

如你所见,我在第39行触发事件.

(按侧边栏底部的查看大图按钮).

文件:

• fagerhult.js
• fagerhult.map.js
• bootstrap-modal.js
• master.css

我会非常感激任何帮助或额外的一双眼睛,因为我很快就会生气.

Answer 1

尝试使用模态事件处理程序.我认为这是最简洁(和正确)的方法,以确保您显示模式后重新调整大小而不重写任何插件:

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
})

更新:我刚刚意识到这个解决方案仍然没有正确地使地图居中,所以我需要再添加一个命令:

$('#map-modal').on('shown', function () {
  google.maps.event.trigger(map, 'resize');
  map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989));
})

Answer 2

我发现display: none在地图的父元素(模态)上真的搞砸了.我把它改成了visibility: hidden绝望,看看会发生什么,它有效!

我还修改了模态JS代码,以便在模visibility: visible/hidden态显示/隐藏时设置模态.否则它将display: none/block再次设置,这将再次创建灰色框.

Answer 3

据我使用 JS 实时编辑在 Chrome 上稍微研究了一下，延迟执行resize以等待模态动画可能会起作用:)

https://gist.github.com/1592330#L107