Angular JS谷歌地图渲染问题

时间:2016-07-02 04:32:23

标签: javascript jquery angularjs google-maps angular-google-maps

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

目前地图显示如下。 enter image description here



<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;

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

1 个答案:

答案 0 :(得分:0)

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

  

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

Angular Google地图 - DocumentationQuickstart可能会有所帮助。

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