angular-google-maps 没有 api 键答案

【问题标题】：angular-google-maps no api keysangular-google-maps 没有 api 键
【发布时间】：2016-09-25 22:05:18
【问题描述】：

我的应用程序收到“无 api 密钥”警告时遇到问题。我添加了这个.config：

  .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
  GoogleMapApi.configure({
   key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g',
   v: '3',
    libraries: 'weather,geometry,visualization'
  });
  }])

这使警告消失了，但我的应用程序仍然得到一个空白页面，而不是谷歌地图。我也没有收到任何警告，所以我不知道出了什么问题，但我认为这一定与 API 密钥没有通过有关。我正在使用这个仓库：https://github.com/angular-ui/angular-google-maps。

这里是网页：http://alainwebdesign.ca/pl4/

我可能出错的完整 JS 文件：

(function (window, ng) {
    ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])



  .config(function ($stateProvider) {
      $stateProvider.state('location', {
          url: '/:lat/:lon',
          templateUrl: 'index.html',
          controller: 'MapsCtrl',
          resolve: {
              resolveMap: function (MapService, $stateParams) {
                  return MapService.getData($stateParams.lat, $stateParams.lon);
              }
          }
      });

  })

  .config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
  GoogleMapApi.configure({
   key: 'AIzaSyCbRPhVlxgVwBC0bBOgyB-Dn_K8ONrxb_g',
   v: '3',
    libraries: 'weather,geometry,visualization'
  });
  }])


    .controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams",
      function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) {
          $log.currentLevel = $log.LEVELS.debug;
          var center = { latitude: $stateParams.lat, longitude: $stateParams.lon };
          alert(center)
          Object.freeze(center);

          $scope.map = {
              center: center,
              pan: false,
              zoom: 16,
              refresh: false,
              events: {},
              bounds: {}
          };

          $scope.map.circle = {
              id: 1,
              center: center,
              radius: 500, //(current time - date lost)*km/hour
              stroke: {
                  color: '#08B21F',
                  weight: 2,
                  opacity: 1
              },

              fill: {
                  color: '#08B21F',
                  opacity: 0.5
              },
              geodesic: false, // optional: defaults to false
              draggable: false, // optional: defaults to false
              clickable: true, // optional: defaults to true
              editable: false, // optional: defaults to false
              visible: true, // optional: defaults to true
              events: {
                  dblclick: function () {
                      $log.debug("circle dblclick");
                  },
                  radius_changed: function (gObject) {
                      var radius = gObject.getRadius();
                      $log.debug("circle radius radius_changed " + radius);
                  }
              }
          }





          //Increase Radius:
          $interval(function () {
              $scope.map.circle.radius += 30; //dynamic var
              $state.transitionTo('location', { //location is the state name
                  center: $stateParams.center,
                  radius: $scope.map.circle.radius
              },
    {
        notify: false
    });
          }, 1000); //end of interval function


      } ]); //end of controller

})(window, angular);

还有index.html：

<!DOCTYPE html>
<html ng-app="app">

<head>
    <link rel="stylesheet" href="example/assets/stylesheets/example.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <script src="website_libs/dev_deps.js"></script>
    <script src="https://code.angularjs.org/1.3.6/angular.js"></script>
    <script src="dist/angular-ui-router.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.underscore.js"></script>
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script><script src="dist/angular-google-maps_dev_mapped.js"></script>
    <script src="getLoc.js"></script>
    <script src="searchRadius.js"></script>


    <title>Pet Locate</title>

    <!--NEW STUFF FROM TOM-->


</head>

<body style="height: 100%">



<div data-ng-controller="MapsCtrl" ng-if="map.center !== undefined" style="height: 100%">
    <ui-gmap-google-map 
                        center='map.center'
                        zoom='map.zoom'
                        draggable='map.draggable'
                        dragging='map.dragging'
                        refresh='map.refresh'
                        options='map.options'
                        events='map.events'
                        pan='map.pan'>


        <ui-gmap-circle 
                        center='map.circle.center'
                        radius='map.circle.radius'
                        fill='map.circle.fill'
                        stroke='map.circle.stroke'
                        clickable='map.circle.clickable'
                        draggable='map.circle.draggable'
                        editable='map.circle.editable'
                        visible='map.circle.visible'
                        events='map.circle.events'>

        </ui-gmap-circle>


    </ui-gmap-google-map>

</div>


</body>

</html>

【问题讨论】：

您的页面上有<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map> 元素吗？
是的，我刚刚添加了 index.html，如果您也想查看其他内容，可能与以下内容有关：ng-if="map.center !== undefined" ？
这就是我的想法。我现在会尝试删除它。

标签： javascript angularjs google-maps

【解决方案1】：

感谢@Tom Coughlin 的评论，它让我意识到问题在于我没有返回有效的“中心”属性，因此 index.html 中的 ng-if 语句阻止了页面的显示。

【讨论】：