在Google准备好之前显示预加载器- AngularJs
在Google准备好之前显示预加载器- AngularJs
提问于 2015-11-09 19:04:57
我如何检查谷歌地图是否准备好了？当Google地图加载时，我想显示预加载程序块。
我有工厂：
var map = false;
var myLatlng = new google.maps.LatLng(48.6908333333, 9.14055555556);
var myOptions = {
zoom: 5,
minZoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggableCursor:'crosshair',
zoomControl: false,
center: myLatlng,
panControl: false,
streetViewControl: false,
preserveViewport: true
}
function addMap(mapId) {
var map = new google.maps.Map(document.getElementById("map"), myOptions);
}
function getMap(mapId) {
if (!map) addMap(mapId);
return map;
}
return {
addMap: addMap,
getMap: getMap
}内部控制器：
$scope.map = GoogleMaps.getMap();谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-09 20:33:50
我会在Google地图上设置一个事件侦听器，一旦地图准备就绪，就会触发它：
function addMap(mapId) {
var map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListenerOnce(map, "idle", function () {
scope.$emit('mapInitialized', map);
});
}然后在启动屏幕指令中侦听事件。
$scope.$on('mapInitialized', function(event, map) {
// in here you set some variable to actually hide the splash screen
});带有黑色启动屏幕的示例代码：
angular
.module('splashMap', [])
.directive('map', function() {
var link = function(scope, element) {
var el = document.createElement("div");
el.style.width = "100%";
el.style.height = "100%";
element.prepend(el);
var map = new google.maps.Map(el, {
center: {
lat: 48.6908333333,
lng: 9.14055555556
},
zoom: 8
});
google.maps.event.addListenerOnce(map, "idle", function() {
scope.$emit('mapInitialized', map);
});
}
return {
restrict: 'E',
link: link
};
}
).directive('splash', function() {
var link = function(scope, element) {
scope.loaded = false;
scope.$on('mapInitialized', function(e, map) {
console.log('loaded');
scope.loaded = true;
scope.$apply();
})
}
return {
restrict: 'E',
link: link,
}
});body,
html,
map {
font-family: "Open Sans", sans-serif;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
map,
splash {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
splash {
background-color: #000;
z-index: 2;
}<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="splashMap">
<splash ng-hide="loaded"></splash>
<map></map>
</body>
Stack Overflow用户
发布于 2015-11-09 19:34:55
我个人没有使用谷歌地图喷气式飞机。
但你不能用这个事件来做吗
tilesloaded或本文档中的事件引用之一。
https://developers.google.com/maps/documentation/javascript/reference页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33616306
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号