角，谷歌地图。地图未加载模板

Billy 发表于 Dev

比利

我在使用带有模板的角度路线时无法加载Google地图。如当前代码所示，如果我导航到“＃/ map”，则Google地图不会显示并检查该元素，地图信息不存在，但模板会加载，因为h1标签“ Map”确实会加载。但是，如果我从地图模板中获取代码并将其放入index.html中，则可以正常工作。有谁知道这是为什么以及如何解决？

这是我的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ski</title>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">


<ng-view></ng-view>

<!-- app and routes -->
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
<!-- controllers -->
<script src="js/controllers/map.controller.js"></script>
</body>
</html>

这是我的地图模板。

<div>
  <h1> Map </h1>
  <script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx">
  </script>
  <script type="text/javascript">
        function initialize() {
          var mapOptions = {
            center: { lat: -34.397, lng: 150.644},
            zoom: 8
          };
          var map = new google.maps.Map(document.getElementById('map-canvas'),
             mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  <div id="map-canvas" style="width: 50%; height: 50%;"></div>
</div>

我的角度模块。

angular.module('Ski', ['ngRoute']);

我的弯角路线。

angular.module('Ski').config(function($routeProvider) {
   'use strict';
  $routeProvider
    .when('/home', {
      templateUrl: 'templates/home.html'
    })
    .when('/map', {
      templateUrl: 'templates/map.html'
    })
    .otherwise({
      redirectTo: '/'
    });
});

dfsq

问题是，在加载地图视图时，已经发生了window.load事件，因此此行

google.maps.event.addDomListener(window, 'load', initialize);

不会调用initialize函数，因为load事件不会再次发生。

而是尝试将地图脚本移到头部：

<head>
  <meta charset="utf-8">
  <title>Ski</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
</head>

然后编写简单的指令以在地图模板中初始化地图：

<div>
  <h1>Map</h1>
  <map-canvas id="map" style="width: 50%; height: 50%;"></map-canvas>
</div>

该mapCanvas指令将如下所示：

angular.module('Ski').directive('mapCanvas', function() {
  return {
    restrict: 'E',
    link: function(scope, element) {
      var mapOptions = {
        center: { lat: -34.397, lng: 150.644},
        zoom: 8
      };
      new google.maps.Map(element[0], mapOptions);
    }
  };
});