无法启动 angular-google-maps

Question

我正在尝试使用angular-google-maps 启动谷歌地图 但是，我遇到了这些错误，尽管我遵循了quickstart 页面上的指南

所以我用谷歌搜索错误，但我什么也没得到，但我看到了一些类似的问题，它是由 AdBlock 引起的，所以我使用隐身窗口再次测试，这些错误消失了，但谷歌地图仍然不在我的应用程序上

这是我的完整代码

ma​​ster.html（包含所有src）

<script type="text/javascript" src="/static/javascripts/lodash.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-sanitize.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-messages.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/satellizer/0.9.4/satellizer.min.js"></script>

<script type="text/javascript" src="/static/javascripts/angular-google-maps.js"></script>
<script type="text/javascript" src="/static/javascripts/loading-bar.js"></script>

app.js[angular.js]

var app = angular.module('app',['ngMaterial','ngSanitize','ngAnimate','satellizer','ngResource','ui.router','ngMessages','angular-loading-bar','uiGmapgoogle-maps']).
 config(['$stateProvider','$urlRouterProvider','$authProvider','$locationProvider','$mdThemingProvider','cfpLoadingBarProvider','uiGmapGoogleMapApiProvider', function($stateProvider,$urlRouterProvider,$authProvider,$locationProvider,$mdThemingProvider, cfpLoadingBarProvider, uiGmapGoogleMapApiProvider) {
     uiGmapGoogleMapApiProvider.configure({
        //    key: 'your api key',
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    });
     $stateProvider
  .state('home', {
    url: '/',
    templateUrl: '/static/views/index.html',
    controller: 'IndexCtrl'
  })
.
.
.

controller.js[angular.js]

angular.module('app').controller('IndexCtrl', [
  '$scope',
  '$http',
  '$rootScope',
  '$auth',
  'Account',
  'uiGmapGoogleMapApi',
  function ($scope, $http, $rootScope,$auth,Account,uiGmapGoogleMapApi) {

    uiGmapGoogleMapApi.then(function(maps) {
      $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 };


    });
  }
]);

index.html

<div style="width:500px;height:500px;">
    <ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
    {{map.center}}  
    </div>

{{map.center}} 可以显示，但不能显示地图。

Answer 1

您可能还没有启动基本的 GoogleMap API

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>

Answer 2

也许您需要“引导”Google Maps API。我通常在我的 HTML 中使用它而不是使用 ng-app:

<script type="text/javascript">
  // Manually  bootstrapping method instead of ng-app="myApp" to be sure
  // Google API Library is downloaded before Angular compiles the root page "/"
  function onGoogleReady() {
    angular.bootstrap(document, [ 'myApp' ]);
  }
  function loadScript() {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src =  "https://maps.googleapis.com/maps/api/js?v=3&libraries=places&callback=onGoogleReady";
    document.body.appendChild(script);
  }
  window.onload = loadScript();
</script>

Answer 3

我只是在这里猜测，但您是否尝试过这种方式？

<ui-gmap-google-map center='{{map.center}}' zoom='{{map.zoom}}'></ui-gmap-google-map>