如何使用 ngMap 在 ng-hide div 中渲染地图而不获取灰色矩形

Question

问题：Google 映射最初在 div 内的元素呈现为 ng-hidden 在 ng-shown 时显示为灰色矩形。

我整理了这个 Plunker 来演示：https://plnkr.co/edit/emzlIT?p=preview

其他人使用 google.maps.event.trigger(map,'resize') 取得了成功，但对于对我来说没用，也许是因为我隐藏了多张地图。在这个笨蛋上， 'resize' 似乎有所作为，但并不一致。 如果你玩 Plunker 和一切似乎都在工作，尝试在 ng-shown 周围平移地图，你会得到灰色。

显示的示例当然是我正在处理的实际网络应用程序的一个非常简化的版本。我只想说使用 ng-if 而不是 ng-show （也适用于其他人）不是一个选项，也不是始终显示我的地图（尽管如果找不到解决方案，我可能不得不考虑 div 之外。)

注意：如果地图变灰，放大或缩小浏览器似乎快速启动渲染，然后地图完美工作，即使隐藏并重新显示我也不知道浏览器缩放会触发所需的行为，但也许这对您来说是个线索。

Answer 1

此行为很可能与 ng-hide 指令有关，该指令又会在父元素上添加 display: none 样式。据报道 (link)，一旦地图位于具有 display: none 样式的元素内，Google 地图控件在呈现时会出现一些问题。

我建议替换 ng-hide 指令：

<div ng-hide="div1Hide" class="mapCase">
    <ng-map id="map1" class="map" center="[-33.851371, 151.277736]" zoom-level="18">Parsley</ng-map>
</div>

例如，ng-class 指令：

<div class="mapCase" ng-style="{'visibility': !div1Hide ? 'visible':'hidden'}">
     <ng-map id="map1" class="map" center="[-33.851371, 151.277736]" zoom-level="18">Parsley</ng-map>
</div>

Modified plunker

如何使用 ngMap 在 ng-hide div 中渲染地图而不获取灰色矩形

How to render maps within ng-hide divs using ngMap without getting a gray rectangle

angularjs

ng-show

ng-hide

ng-map