Angular 8手风琴地图不显示

Question

3

我有一个使用Angular和Bootstrap手风琴的项目。当用户点击面板时，折叠面板将显示一个OpenStreet地图，但由于某种原因地图没有显示。

如果我将行为更改为始终显示面板，例如：class="collapse show"，那么地图会正确初始化。

- Gaetan56

2个回答

2

问题出在画布应该渲染的区域被设置为display: none;。扩展手风琴后，添加map.updateSize()即可解决问题！请参考我制作的有效的 StackBlitz 编辑。

- Daniel B

非常感谢，它起作用了！我一直在研究如何使用 Subject，但不确定如何使用它，这非常有用。 - Gaetan56

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TotallyNewb · Accepted Answer

我不熟悉您用于地图的库，但由于您没有在任何地方指定大小，我假设它会自动调整地图元素以适应指定的容器。

由于您容器的父级设置为"display: none"，宽度和高度将未设置，这意味着地图很可能具有0宽度和0高度。

我快速检查了 OL 文档，似乎您可以使用 this.map.updateSize(); 来根据其容器大小更新地图大小。如何和何时调用取决于您 - 在当前实现中，我建议尝试监听 app-map 组件的样式更改。

一个附带建议 - 不要使用 "经典" bootstrap，而是使用更符合 Angular 的框架之一，这些框架将为您提供事件和方法，从而使长期处理代码变得更加容易。