Angular Google 地图不会显示任何内容

Question

据我所知，下面的代码是运行 Angular Google 地图所需的最少代码，但它不会在屏幕上显示地图。查看 Chrome 中的#my-map 组件，它显示 0x0px，尽管有 css 和动态高度声明，但我无法更改它。除此之外，它似乎运行没问题，没有控制台错误，appMaps 模块至少已正确初始化。

<!DOCTYPE html>
html>
  <head>
    <title>New Map</title>
    <style>
      html, body {
        height: 2000px;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      .angular-google-map-container { height: 400px; }
    </style>

    <script src="lodash/lodash.js"></script>
    <script src="angular/angular.js"></script>
    <script src="angular-google-maps/dist/angular-google-maps.js"></script>
    <script>  
      var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);

      appMaps.config(function(uiGmapGoogleMapApiProvider) {
        uiGmapGoogleMapApiProvider.configure({
         key: 'My Key Is Entered Here',
         v: '3.20',
         libraries: 'weather,geometry,visualization'
        });
      });

      appMaps.controller('mainCtrl', function($scope) {
        $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };
        $scope.$on('$viewContentLoaded', function () {
                var mapHeight = 400; // or any other calculated value
                $("#my-map .angular-google-map-container").height(mapHeight);
            });
      }); 
    </script>
  </head>
  <body>
    <h1>TEST</h1>
    <div id="map_canvas" ng-controller="mainCtrl">
      <ui-gmap-google-map id="my-map" center="map.center" zoom="map.zoom"></ui-gmap-google-map>
    </div>
  </body>
</html>

编辑：是的，所以 Roux 是正确的，在顶部添加了 google 映射 API 脚本（带密钥）和 angular-simple-logger在 angular 之后，这让我非常接近。然后我只需要将 ng-app="appMaps" 添加到 body 元素（一般来说我是 angular 的新手）并且它起作用了。谢谢！

Answer 1

通过关注Quickstart，您可以看到您错过了几个library/api。

在您的项目中添加 angular-simple-logger.js（我认为它带有 angular-ui 包或 angular-google-地图)
不要忘记添加 google api，没有它，什么都行不通。 <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

Angular Google 地图不会显示任何内容

Angular Google Maps won't show anything

angularjs

angular-google-maps