Google地图呈现为灰色框

Question

我是ReactJS的新手并且玩了一下。

我尝试在可折叠的“React-Bootstrap”面板中显示Google地图。 但我得到一个灰色的盒子。调整窗口大小后，地图会正确显示。
Here is my code

但是我被卡住了。如果我折叠面板，地图始终显示为灰色框。See here

我的想法是我可以在面板中添加一个状态，当我打开它时会改变它，然后我传递给子组件来重新渲染组件。

最后但并非最不重要的是，我试图构建一个“观察者”，触发

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

但也失败了。

我不知道我还能做什么或者什么能正常工作 我感谢你的每一个帮助。

Answer 1

谷歌地图这样的问题通常是由于在绘制地图时保持地图不可见或不具有高度的div。 API非常特别。因此，修复通常是为了确保在绘制地图之前保持地图的div是可见的并且具有高度。

我已将你的例子修改为：

1. 面板打开时加载
2. 绘制地图
3. 调用切换回调，隐藏地图
4. 然后使用标题
中的onSelect方法控制面板

你可以在这里找到这个，地图有效：

https://codesandbox.io/s/nwno9vw07j

Answer 2

我不确定这是否会有所帮助，但我自己使用谷歌地图。如果在隐藏包含div的情况下加载谷歌地图，我会得到灰色框。它就像加载到什么都没有的大小。但是如果在加载地图时可以看到包含的div，那么它很开心。因此，您必须暂停启动地图，直到您手动展开可折叠面板，然后立即折叠它。您可以使用不透明度来欺骗它，并使其透明，以避免在屏幕上调整大小时出现闪烁。