Angular JS谷歌地图渲染问题答案

【问题标题】：Angular JS google map rendering issueAngular JS谷歌地图渲染问题
【发布时间】：2016-07-02 04:32:22
【问题描述】：

我遇到了谷歌地图的问题。

目前地图显示如下。

&lt;ui-gmap-google-map center='map.center' zoom='map.zoom'&gt;&lt;/ui-gmap-google-map&gt;

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

会有什么问题。请帮忙，谢谢

【问题讨论】：

创建一个重现此问题的演示
添加价值map.zoom = 4 并尝试
谷歌地图的高度和宽度设置了吗？
我已经尝试了你的两个建议，没有运气
如果我们可以在问题页面中调试会容易得多。

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

【解决方案1】：

正如Angular Google Maps - FAQ 在部分渲染的地图上所回答的那样：

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

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

此外，这篇 SO 帖子 - Showing a google map in angular-ui modal 也会很有帮助。

【讨论】：