您已在此页面上多次包含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

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

现在，第二个小部件会测试是否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可任意选择的名称（就是不使用的东西，将被其他代码惨败）