我在使用带有模板的 Angular 路线时加载谷歌地图时遇到问题。由于当前的代码是，如果我导航到“#/map”，谷歌地图不会显示并检查元素， map 信息不存在，但模板会随着 h1 标签“ map ”的加载而加载。但是，如果我从 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>
这是我的 map 模板。
<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 模块。
angular.module('Ski', ['ngRoute']);
我的 Angular 路线。
angular.module('Ski').config(function($routeProvider) {
'use strict';
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
最佳答案
问题是当加载 map View 时window.load事件已经发生，所以这一行
google.maps.event.addDomListener(window, 'load', initialize);
不会调用initialize函数，因为加载事件不会再次发生。
尝试将 map 脚本移动到头部:
<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>
然后在 map 模板中编写简单的指令来初始化 map :
<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);
}
};
});
演示:http://plnkr.co/edit/370NBWS3YlTrGBqK7riT?p=preview
关于javascript - 有 Angular ，谷歌地图。 map 未加载模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27452755/