Google地图呈现为灰色框

问题描述 投票:1回答:2

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

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

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

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

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

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

但也失败了。

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

javascript reactjs google-maps react-bootstrap
2个回答
1
投票

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

我把你的例子修改为:

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

你可以在这里找到这个,地图有效:

https://codesandbox.io/s/nwno9vw07j


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.