延迟加载 Google Maps API 直到地图可见答案

【问题标题】：Delaying loading Google Maps API until map is in view延迟加载 Google Maps API 直到地图可见
【发布时间】：2021-03-11 01:39:44
【问题描述】：

我正在使用 Google Maps JavaScript API v3 开发一个插件，并希望最大限度地减少在流量很大的网站上使用的请求数量。目前地图在页面下方相当远，所以我想推迟加载 API 并产生请求成本，除非用户实际向下滚动到它并且地图在视图中。

我可以很容易地检查 map 元素何时实际在视图中，我的问题是，有没有人知道加载 gapi 库脚本本身时 API 调用是否算作请求？（其中包含 API 密钥的 URL 已加载到页面中），还是仅在地图实际初始化时才计算请求（即 map = new google.maps.Map()..）？

谢谢！

【问题讨论】：

API 调用仅在您初始化地图时才计数。您可以为地图的初始化函数添加 setTimeout() 并查看它是如何请求的。调用脚本而不调用任何函数不会触发任何 API 调用。
developers.google.com/maps/billing/gmp-billing#dynamic-maps - 使用 Maps JavaScript API 显示地图的网页或应用程序。使用google.maps.Map() 类创建地图。用户与地图的交互（例如平移、缩放或切换地图图层）不会产生额外的地图加载。

【解决方案1】：

您必须删除 API 为您提供的 callback 函数。

<script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY&callback=initMap()"></script>

所以它看起来像这样：

<script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY"></script>

然后只需在代码中的任意位置调用initMap() 函数

a = 45;
b = 2;
initMap(); // Aqui se manda a ejecutar

【讨论】：