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

Question

序言：我已经将Google地图和地理定位实现为独立的小部件，现在用户可以在自己拥有的页面中根据需要添加任意数量的小部件。 我正在使用$ .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 部件将测试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可以是您选择的任何名称（只是不要使用会被其他代码破坏的名称）