javascript - Angular JS 谷歌地图渲染问题

Question

我在使用谷歌地图时遇到问题。

当前 map 显示如下。

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

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

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

Answer 1

正如 Angular Google Maps - FAQ 中的回答在部分渲染的 map 上:

If rendering starts before elements are full size, google maps calculates according to the smaller size. This is most commonly the case with a hidden element (eg, ng-show). To fix this, use "ng-if" instead, as this will wait to attach to the DOM until the condition is true, which should be after everything has rendered fully.

Angular Google map - Documentation和 Quickstart可能有帮助。

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