如何在 angularjs 中加载页面后加载谷歌地图（以提高性能）答案

【问题标题】：How to load google maps after page loads in angularjs (to improve performance)如何在 angularjs 中加载页面后加载谷歌地图（以提高性能）
【发布时间】：2019-06-07 06:17:33
【问题描述】：

我有一个使用谷歌地图的 angularJS webapp。出于性能目的，我想优先考虑页面加载或至少关键渲染路径，所以我想在页面加载后延迟谷歌地图的加载。

为了更详细一点，实际上我有在索引页面中加载谷歌地图的脚本，例如：

<html ng-app="myApp">
<head></head>
<body>
<!-- My code here -->
<script async defer type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.37"></script>
</body>
</html>

另外，我有一个部分模板视图，它有一个使用谷歌地图的指令。

<boats-map location="Spain" zoom="8" class="map-container"></boats-map>

我认为指令的细节与问题无关。但应该是这样的：

.directive('boatsMap',  [
    function() {            

    function link(scope, element, attrs) {  

        console.log("Map loaded");                                                            
        // Do whatever logic
    }

一切正常，如上所述，这只是出于性能目的，但我在 devtools 的网络瀑布中注意到的是，当我评论加载谷歌地图的脚本以及我视图中的指令时，我的页面和关键渲染路径大约提前 3 秒加载。

所以，我想延迟此功能，直到页面完全加载。

请注意脚本是使用 async 和 defer 来异步加载脚本，但这并不能避免对加载造成很大的影响。

我读过这样的方法：How do I load google maps external javascript after page loads? 但不确定这是否是角度方式。

请查看性能截图： 1. 使用谷歌地图脚本：

评论谷歌地图脚本：

【问题讨论】：

将$(document).ready 放在AngularJS 指令中是没有意义的。 $compile 服务永远不会在 DOMcontentLoaded 事件之前链接指令。
谢谢。已编辑。但是，有什么办法可以解决这个问题吗？

标签： javascript angularjs google-maps

【解决方案1】：

要考虑的一个选项是将callback 参数与async 属性结合使用。这样您就可以保证从documentation 加载 Google Maps API：

当 API 准备就绪时，它将调用使用指定的函数 callback参数。

改动列表：

a) 指定callback 函数名：

<script async defer src="https://maps.google.com/maps/api/js?callback=lazyLoadCallback"></script>

b) 在 Google Maps API 准备就绪后初始化地图：

link: function(scope) {
    window.lazyLoadCallback = () => {
       //Google Maps API is ready...        
    };
}

Plunker

【讨论】：