角度，谷歌地图。没有使用模板加载地图 [英] angular, google maps. map not loading with template
问题描述
我在加载谷歌地图时遇到了问题，而在模板中使用角度路线。由于当前代码导航到＃/ 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>
<！ - 控制器 - >
< script src =js / controllers / map.controller.js>< / script>
< / body>
< / html>
这是我的地图模板。
< div>
< h1>地图< / h1>
< script type =text / javascript
src =https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxxxxxx>
< / script>
< script type =text / javascript>
函数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-canvasstyle =width：50％; height：50％;>< / div>
< / div>
My angular module。
angular.module（'Ski'，['ngRoute']）;
我的角度路线。
pre $
angular.module（'Ski'）.config（函数（$ routeProvider）{$ b $'use strict';
$ routeProvider
.when（'/ home'，{
templateUrl：'templates / home.html'
}）
.when（'/ map'， {
templateUrl：'templates / map.html'
}）
.otherwise（{
redirectTo：'/'
}）;
}） ;
问题是当地图视图加载窗口时。 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>
然后编写简单指令来初始化地图模板中的地图：
< div>
< h1>地图< / h1>
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
I am having trouble loading a google map, while using angular routes with a template. As the code currently stands if i navigate to "#/map" the google map does not show up and inspecting the element, the map information is not there but the template loads as the h1 tag 'Map' does load. However, if I take the code from my map template and put it into my index.html it works perfectly fine. Does anyone know why this is and how to fix it?
Here is my 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>
This is my template for 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>
My angular module.
angular.module('Ski', ['ngRoute']);
My angular routes.
angular.module('Ski').config(function($routeProvider) {
'use strict';
$routeProvider
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
The problem is that when map view is loaded window.load event has already occurred, so this line
google.maps.event.addDomListener(window, 'load', initialize);
won't invoke initialize function, because load event is not going to happen again.
Instead try to move map script into head section:
<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>
and then write simple directive to initialize map in map template:
<div>
<h1>Map</h1>
<map-canvas id="map" style="width: 50%; height: 50%;"></map-canvas>
</div>
The mapCanvas directive will look then something like this:
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);
}
};
});
Demo: http://plnkr.co/edit/370NBWS3YlTrGBqK7riT?p=preview
这篇关于角度，谷歌地图。没有使用模板加载地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
