时间戳

首页 > 解决方案 > 除非用户触发要显示的地图，否则避免加载 Google Maps API

javascript - 除非用户触发要显示的地图，否则避免加载 Google Maps API

问题描述

因此，我有一个使用 Google Maps API 显示地图的网络应用程序，但该地图通常是从视图中隐藏的，并且每次页面加载都不需要它。我不想为每个页面加载调用 API（并在后台加载地图），我只想调用 API 并在实际需要时加载地图。

从带宽的角度来看，这似乎是一种不好的做法，并且每个页面加载都可能由 Google 收费。

这就是我以前的方式（总是加载），一旦页面完成加载就会加载：

// Define initMap code here, and then:

<script async defer src="https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initMap"></script>

什么是处理这个问题的好方法（最好是可以是单行代码的直接替换方法）？

事后我查看了添加此脚本标记的各种代码，但这似乎是错误的方法。

有一些较旧的帖子（例如单击时加载谷歌地图），但这些帖子已经过时，因为它们不包括现在使用谷歌地图所需的 API 密钥。它们也是多行的，不能直接替代通常使用的单个脚本标签。

另外，对于像这样的简单需求，我不喜欢谷歌建议的方法，它需要包含另一个代码库。（https://developers.google.com/maps/documentation/javascript/examples/programmatic-load-button）

标签： javascripthtmlgoogle-maps-api-3

解决方案

发现使用 jQuery（无论如何我都使用它）， $.getScript 选项效果很好：

$("#user_expand_map_section_button").on("click", function(){
    $.getScript('https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initSpecifyMap');
});

然后，只有在用户展开面板/单击按钮/打开模式等时，它才会调用 Google Maps API。

推荐阅读