2

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

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

其他人已经成功使用google.maps.event.trigger(map,'resize')，但对我来说没有帮助，也许是因为我隐藏了多个地图。在这个 plunker 上， 'resize'似乎有所作为，但并非始终如一。如果您使用 Plunker 并且一切似乎都正常，请尝试在 ng 显示的地图周围平移，您将得到灰色。

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

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

4

1 回答 1

2

这种行为很可能与指令有关，ng-hide指令又display: none在父元素上添加样式。据报道（链接）一旦地图位于具有display: none样式的元素内，Google Maps 控件的渲染就会出现一些问题。

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

修改后的 plunker

于 2016-01-22T11:44:35.403 回答