Question

我在使用角度路线和模板时加载谷歌地图时遇到问题。如果我导航到＆＃34;＃/ map＆＃34;谷歌地图没有显示和检查元素，地图信息不存在，但模板加载为h1标签＆＃39;地图＆＃39;加载。但是，如果我从我的地图模板中获取代码并将其放入我的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: '/'
    });
});

Answer 1

问题是当加载地图视图时，window.load事件已经发生，所以这行

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

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

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

<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);
    }
  };
});

角度，谷歌地图。地图没有加载模板

1 个答案:

演示：http://plnkr.co/edit/370NBWS3YlTrGBqK7riT?p=preview