Question

从我收集的内容来看，下面的代码是运行Angular Google Maps的最低要求，但它不会在屏幕上显示地图。看看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-simple-logger，这让我非常接近。然后我只需要将ng-app =“appMaps”添加到body元素（我一般都是角色的新手）并且它有效。谢谢！

Answer 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>

Angular Google Maps不会显示任何内容

1 个答案: