[英]AngularJS, pause while loading Google Maps API
I'm using Angular Google Maps to load Google Maps API, but there's a 3-4 seconds pause in loading API script. 我正在使用Angular Google Maps加载Google Maps API,但是加载API脚本需要暂停3-4秒。 So everything on the page is loaded -> 3-4 seconds pause -> API scripts starts loading -> map displayed.
因此,页面上的所有内容均已加载-> 3-4秒暂停-> API脚本开始加载->显示的地图。
Looks like it's just waiting for some timer event: 看起来它只是在等待一些计时器事件:
Google Maps config snippet: Google Maps配置片段:
uiGmapGoogleMapApiProvider.configure({
key: 'xxxxxxxxxx',
v: '3',
libraries: 'geocoder',
preventLoad: false,
china: false,
transport: 'https'
});
Map loads here: 地图加载在这里:
<div id="shopMap" ng-init="initShopMap()"></div>
via this function: 通过此功能:
$scope.initShopMap = function() {
if ($scope.shop.latitude && $scope.shop.longitude) {
uiGmapGoogleMapApi.then(function(maps) {
shopMap = new maps.Map(document.getElementById("shopMap"), {
control: {},
options: {
draggable: true,
scrollwheel: false
},
center: new maps.LatLng(0, 0),
zoom: 14,
marker: {
options: {
icon: {
scaledSize: { width: 24, height: 36 },
url: '/images/pm-shop-icon.png'
}
}
}
});
directionsService = new maps.DirectionsService();
initMarkers();
$scope.showShopMap = true;
});
}
}
Any ideas why that delay might happen? 为什么会出现这种延迟的任何想法? Would very appreciate any hints, thanks ✨
非常感谢任何提示,谢谢✨
Turned out, that api loading in this project was wrong, there wasn't this line in index.htm: 原来,该项目中的api加载是错误的,index.htm中没有此行:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
I wonder how maps even worked without this line :) 我不知道地图如何在没有此行的情况下工作:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.