angularjs - 如何使用 ngMap 在 ng-hide div 中渲染 map 而不得到灰色矩形

Question

问题:最初位于 div 内的 Google map 元素 呈现为 ng-hidden 的内容在 ng-shown 时显示为灰色矩形。

我已经将这个 Plunker 放在一起来演示:https://plnkr.co/edit/emzlIT?p=preview

其他人已成功使用 google.maps.event.trigger(map,'resize')，但对于 对我来说这没有帮助，也许是因为我隐藏了多个 map 。在这个笨蛋身上， 'resize' 似乎有所不同，但并不一致。 如果你玩 Plunker 似乎一切正常，尝试在 ng-shown 周围平移 map ，您会看到灰色。

当然，所显示的示例是我正在开发的实际网络应用程序的非常简化的版本。 可以说，使用 ng-if 代替 ng-show (也适用于其他人)不是一个选择，也不是 始终显示我的 map (尽管如果没有找到解决方案，我可能不得不考虑 在 div 之外。)

注意:如果您看到灰色的 map ，放大或缩小浏览器似乎会 跳转启动渲染然后 map 完美工作，即使隐藏并重新显示我也不知道 浏览器缩放会触发所需的行为，但这也许对您来说是一条线索。

Answer 1

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

我建议替换 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