Angular Google Maps 不会显示任何内容答案

【问题标题】：Angular Google Maps won't show anythingAngular Google Maps 不会显示任何内容
【发布时间】：2017-01-05 07:07:33
【问题描述】：

从我收集到的以下代码是运行 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 是正确的，在顶部添加了谷歌地图 API 脚本（带键），在 angular 之后添加了 angular-simple-logger，这让我非常接近。然后我只需要将 ng-app="appMaps" 添加到 body 元素（我通常是 angular 新手）并且它起作用了。谢谢！

【问题讨论】：

你还需要安装 angular-simple-logger.js 并在 header 中引用它，这个库是强制性的。（但是，我认为如果是问题所在，您将遇到控制台错误）。此外，您错过了 HTML 标记中的“

标签： angularjs angular-google-maps

【解决方案1】：

关注Quickstart，你可以看到你错过了调用几个库/api。

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

【讨论】：