您已在此页面上多次包含Google Maps JavaScript API。这可能会导致意外错误。使用$ .getScript（）

Question

序言： 我已经将Google Maps和Geolocation实施为独立的小部件，现在用户可以在自己拥有的页面中随意添加小部件。 我正在使用$ .getScript（URl，callback）来加载该URL的脚本。

问题： 当用户在同一页面中多次添加两个小部件或同一小部件​​时，检查windows.google失败，并且两次执行$ .getScript（url，callback）。由于这个原因，我从Google脚本中得到了一个错误

  

您已多次包含Google Maps JavaScript API   这一页。这可能会导致意外错误。当使用   $ .getScript（）

if(window.google !== undefined && window.google !== null) {
    onScriptLoad(null, null, 200);
} else {
    $.getScript(googleUrl, onScriptLoad);
}

以上行在两个小部件中都存在，并且两个小部件彼此独立。它总是进入两个函数的else块。 期待这里有一些解决方法，例如使用javascript或jquery同步加载脚本

Answer 1

当您的代码在第一个 widget 中运行时，它将启动google API的加载，但是window.google直到脚本完成加载后才会创建。这是异步

现在，第二个 widget 测试是否存在window.google，但这仍然在Google API加载之前发生，因此，它也认为它需要加载google API

所以，代替这个：

if(window.google !== undefined && window.google !== null) {
    onScriptLoad(null, null, 200);
} else {
    $.getScript(googleUrl, onScriptLoad);
}

尝试

window.loadingGoogleApi = window.loadingGoogleApi || $.getScript(googleUrl);
window.loadingGoogleApi.then(onScriptLoad);

loadingGoogleApi可以是您选择的任意名称（只是不要使用会被其他代码破坏的名称）