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

Question

前言:我已经将 Google map 和地理定位实现为独立的小部件，现在用户可以在他拥有的页面中随意添加小部件。我正在使用 $.getScript(URl, callback) 来加载该 URL 的脚本。

问题:当用户在同一页面中多次添加小部件或同一小部件​​时，检查 windows.google 失败并且 $.getScript(url, callback) 被执行两次。因此，我从 Google 脚本中收到错误

You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors. when called using $.getScript()

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

上面这行在两个widget中都存在，并且两个widget是相互独立的。它总是进入两个函数的 else block 。期待这里的一些工作，比如使用 javascript 或 jquery 同步加载脚本

Answer 1

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

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

所以，而不是这个:

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 可以是您选择的任何名称(只是不要使用会被其他代码破坏的名称)