Javascript 角度，谷歌地图。不使用模板加载映射_Javascript_Angularjs_Google Maps

Javascript 角度，谷歌地图。不使用模板加载映射

javascript angularjs google-maps

Javascript 角度，谷歌地图。不使用模板加载映射,javascript,angularjs,google-maps,Javascript,Angularjs,Google Maps,在使用带模板的角度路线时，我在加载谷歌地图时遇到问题。如果我导航到/映射google地图并没有显示和检查元素，那么代码当前是有效的，地图信息不在那里，但是模板会像h1标记“map”一样加载。但是，如果我从地图模板中获取代码并将其放入index.html中，它就可以正常工作。有人知道这是为什么以及如何修复它吗这是我的index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="ut

在使用带模板的角度路线时，我在加载谷歌地图时遇到问题。如果我导航到/映射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>

我的角路线

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

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

google.maps.event.addDomListener(window, 'load', 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>

演示：

google.maps.event.addDomListener(window, 'load', 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>

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