我正在学习角度，我想在角度局部中包含一张地图。正如我所做的那样，它会加载部分，但只有在你重新加载页面时才会加载。
google地图脚本+ API密钥包含在index.html
中此时脚本在部分
中被包含在内<!-- map -->
<div id="map" class="col-lg-12">
<script type="text/javascript" src="js/map.js"></script>
</div>
<!-- /map -->
我的页面控制器是空的，据我所知，我不得不在这里调用它
app.controller('PageCtrl', function (/* $scope, $location, $http */) {
console.log("Page Controller ready");
});
map.js：
function init() {
var e = {
zoom: 8,
center: new google.maps.LatLng(12.00, 12.00),
styles: [{
featureType: "all",
elementType: "all",
stylers: [{
visibility: "on"
}]
}, {
featureType: "all",
elementType: "labels",
stylers: [{
visibility: "off"
}, {
saturation: "-100"
}]
}, {
featureType: "all",
elementType: "labels.text.fill",
stylers: [{
saturation: 36
}, {
color: "#000000"
}, {
lightness: 40
}, {
visibility: "off"
}]
}, {
featureType: "all",
elementType: "labels.text.stroke",
stylers: [{
visibility: "off"
}, {
color: "#000000"
}, {
lightness: 16
}]
}, {
featureType: "all",
elementType: "labels.icon",
stylers: [{
visibility: "off"
}]
}, {
featureType: "administrative",
elementType: "geometry.fill",
stylers: [{
color: "#000000"
}, {
lightness: 20
}]
}, {
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [{
color: "#000000"
}, {
lightness: 17
}, {
weight: 1.2
}]
}, {
featureType: "landscape",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: 20
}]
}, {
featureType: "landscape",
elementType: "geometry.fill",
stylers: [{
color: "#4d6059"
}]
}, {
featureType: "landscape",
elementType: "geometry.stroke",
stylers: [{
color: "#4d6059"
}]
}, {
featureType: "landscape.natural",
elementType: "geometry.fill",
stylers: [{
color: "#4d6059"
}]
}, {
featureType: "poi",
elementType: "geometry",
stylers: [{
lightness: 21
}]
}, {
featureType: "poi",
elementType: "geometry.fill",
stylers: [{
color: "#4d6059"
}]
}, {
featureType: "poi",
elementType: "geometry.stroke",
stylers: [{
color: "#4d6059"
}]
}, {
featureType: "road",
elementType: "geometry",
stylers: [{
visibility: "on"
}, {
color: "#7f8d89"
}]
}, {
featureType: "road",
elementType: "geometry.fill",
stylers: [{
color: "#7f8d89"
}]
}, {
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{
color: "#7f8d89"
}, {
lightness: 17
}]
}, {
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{
color: "#7f8d89"
}, {
lightness: 29
}, {
weight: .2
}]
}, {
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: 18
}]
}, {
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{
color: "#7f8d89"
}]
}, {
featureType: "road.arterial",
elementType: "geometry.stroke",
stylers: [{
color: "#7f8d89"
}]
}, {
featureType: "road.local",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: 16
}]
}, {
featureType: "road.local",
elementType: "geometry.fill",
stylers: [{
color: "#7f8d89"
}]
}, {
featureType: "road.local",
elementType: "geometry.stroke",
stylers: [{
color: "#7f8d89"
}]
}, {
featureType: "transit",
elementType: "geometry",
stylers: [{
color: "#000000"
}, {
lightness: 19
}]
}, {
featureType: "water",
elementType: "all",
stylers: [{
color: "#2b3638"
}, {
visibility: "on"
}]
}, {
featureType: "water",
elementType: "geometry",
stylers: [{
color: "#2b3638"
}, {
lightness: 17
}]
}, {
featureType: "water",
elementType: "geometry.fill",
stylers: [{
color: "#24282b"
}]
}, {
featureType: "water",
elementType: "geometry.stroke",
stylers: [{
color: "#24282b"
}]
}, {
featureType: "water",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "water",
elementType: "labels.text",
stylers: [{
visibility: "off"
}]
}, {
featureType: "water",
elementType: "labels.text.fill",
stylers: [{
visibility: "off"
}]
}, {
featureType: "water",
elementType: "labels.text.stroke",
stylers: [{
visibility: "off"
}]
}, {
featureType: "water",
elementType: "labels.icon",
stylers: [{
visibility: "off"
}]
}]
},
t = document.getElementById("map"),
l = new google.maps.Map(t, e);
new google.maps.Marker({
position: new google.maps.LatLng(48.84, 12.95),
map: l,
title: "Snazzy!"
})
}
google.maps.event.addDomListener(window, "load", init);
我的猜测是部分
google.maps.event.addDomListener(window, "load", init);
必须在控制器中发生，但我无法使其工作。
答案 0 :(得分：1)
如果您需要重新加载页面以使其工作，则意味着实例化地图所需的任何内容（即new google.maps.Map()）尚未准备就绪。另外，看起来你有另一个用于地图初始化的脚本，如果你计划将这个实现放在你将重用地图的地方，它们都应该在你的控制器或指令中。
如果我想同步加载地图（与非阻塞的异步相比性能较慢）我将其设置为：
<强> partial.html
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script src="app.module.js"></script>
<script src="synchronous.controller.js"></script>
</head>
<body ng-app="app">
<div id="view" ng-controller="SynchronousController as vm">
<h1>{{vm.title}}</h1>
<div id="map"></div>
</div>
</body>
<强> sychronous.controller.js
function SynchronousController() {
var vm = this;
vm.title = 'Loading map synchronously';
vm.initMap = initMap;
// manually call your initMap function
vm.initMap();
function initMap() {
vm.map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
}
我已经创建了一些关于如何：
的工作示例 之前的一些现有最佳做法请务必使用您自己的API密钥
如果您还有兴趣了解如何将地图制作成可在任何部分中重复使用的指令，则a good example。
希望有所帮助！