Angular JS谷歌地图渲染问题

Question

我正面临谷歌地图的问题。

目前地图显示如下。

＆＃13;

＆＃13;

<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

var ngApp = angular.module('ngTest', ['ngResource', 'uiGmapgoogle-maps']);
    ngApp.config(
      ['uiGmapGoogleMapApiProvider', function (GoogleMapApiProviders) {
        GoogleMapApiProviders.configure({
          v: '3.17',
          china: true
        });
      }]);

＆＃13;

＆＃13;

＆＃13;

会出现什么问题。 请帮助，谢谢

Answer 1

在部分呈现的地图上的Angular Google Maps - FAQ中回答：

  

如果渲染在元素为完整大小之前开始，则谷歌地图会根据较小的尺寸进行计算。这通常是隐藏元素（例如，ng-show）的情况。 要解决此问题，请使用“ng-if”，因为这将等待附加到DOM，直到条件为真，这应该在所有内容完全呈现之后。

Angular Google地图 - Documentation和Quickstart可能会有所帮助。

此外，此SO帖子 - Showing a google map in angular-ui modal也非常有用。