angular-google-渲染后地图容器元素为空

Question

我将 angular-google-maps 与 typescript 和 requirejs 一起使用。我用下一个代码初始化地图：

Requirejs 配置：

    require.config({
    urlArgs: 'bust=' + (new Date()).getTime(),
    paths: {
         ....
        'maps': '/scripts/angular/angular-google-maps.min',
        'lodash': '/scripts/angular/lodash.min',
        'app': '/app/app'
    },
    shim: {
        ...
        'maps': { deps: ['lodash', 'angular'] },
        'angular-cookies': { deps: ['angular'] }
    }
});

require(['jquery', 'angular', 'bootstrap', 'angular-ui-router', 'angular-cookies', 'maps', 'app'],
    ($: JQueryStatic, angular: ng.IAngularStatic) => {
        $(() => {
            angular.bootstrap(document, ['app']);
        });
    });

index.html

<html xmlns="http://www.w3.org/1999/xhtml">
    ...
    <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>
    <script src="Scripts/require.js" data-main="/app/config.js"></script>
</body>
</html>

在控制器视图中我有下一个布局：

                <div class="row">
                <ui-gmap-google-map center='map.center' zoom='map.zoom' id="myGoogleMap"></ui-gmap-google-map>
            </div>

在控制器中我有来自here

的默认设置

渲染页面后我看到下一个布局：

<ui-gmap-google-map center="map.center" zoom="map.zoom" id="myGoogleMap" class="ng-isolate-scope">
<div class="angular-google-map">
    <div class="angular-google-map-container"></div>
    <div ng-transclude="" style="display: none"></div>
</div>

三个 google api 脚本和 angular 地图指令已初始化，但地图未显示。为什么？

Answer 1

我遇到了同样的问题，因为我没有将固定高度设置为 .angular-google-map-container 一旦我设置 .angular-google-map-container { height: 350px; }, 它开始出现

angular-google-渲染后地图容器元素为空

angular-google-map-container element is empty after render

requirejs

angularjs

typescript

angular-google-maps