Angular 8 个未显示地图的手风琴
Angular 8 Accordion with map not showing
我有以下 Angular 使用 bootstap 手风琴的项目。
当用户点击面板时，折叠面板会显示 openstreet 地图，但由于某种原因地图没有显示
https://stackblitz.com/edit/angular-jdbzhe
如果我将行为更改为始终像这样显示面板：class="collapse show" 那么地图就会正确初始化
我不熟悉您用于地图的库，但由于您没有在任何地方指定大小，我假设它会自动调整地图元素的大小以适合指定的容器。
由于您的容器的父级设置为显示：none "collapse" class，宽度和高度将被取消设置，这意味着地图很可能具有 0 宽度和0 高度。
我快速查看了 OL 文档，您似乎可以使用 this.map.updateSize(); 根据容器大小更新地图大小。如何以及何时调用它取决于您 - 在当前的实现中，我会说尝试听取您的应用程序地图组件上的样式更改。
一方面的建议 - 不要使用 "classic" bootstrap 尝试使用更多 angular 友好的框架之一，它将为您提供事件和方法，使您可以使用代码长 运行.
更容易
问题来自于它在应该呈现 canvas 的区域上有一个 display: none;。
在展开手风琴后添加一个 map.updateSize()！
看看这个working StackBlitz edit我看了。
我有以下 Angular 使用 bootstap 手风琴的项目。 当用户点击面板时，折叠面板会显示 openstreet 地图，但由于某种原因地图没有显示
https://stackblitz.com/edit/angular-jdbzhe
如果我将行为更改为始终像这样显示面板：class="collapse show" 那么地图就会正确初始化
我不熟悉您用于地图的库，但由于您没有在任何地方指定大小，我假设它会自动调整地图元素的大小以适合指定的容器。
由于您的容器的父级设置为显示：none "collapse" class，宽度和高度将被取消设置，这意味着地图很可能具有 0 宽度和0 高度。
我快速查看了 OL 文档，您似乎可以使用 this.map.updateSize(); 根据容器大小更新地图大小。如何以及何时调用它取决于您 - 在当前的实现中，我会说尝试听取您的应用程序地图组件上的样式更改。
一方面的建议 - 不要使用 "classic" bootstrap 尝试使用更多 angular 友好的框架之一，它将为您提供事件和方法，使您可以使用代码长 运行.
更容易问题来自于它在应该呈现 canvas 的区域上有一个 display: none;。
在展开手风琴后添加一个 map.updateSize()！
看看这个working StackBlitz edit我看了。