时间戳

首页 > 解决方案 > 谷歌地图回调并不总是触发

javascript - 谷歌地图回调并不总是触发

问题描述

问题：加载谷歌地图脚本时，似乎没有执行回调。它可能与如何加载谷歌地图脚本有关。

上下文：当满足某些最低视口条件时，我的网站会在首页显示地图。具体来说，我避免在使用移动设备时加载它。我不想使用 jQuery :)

实现：我这样做的方式是首先加载一个小的手工脚本（google-map.js），它做了很多事情并以：

function dynamicallyLoadScript(url) {
    var script = document.createElement("script");
    script.src = url;
    script.type = "text/javascript";
    script.defer = true;
    document.head.appendChild(script);
};

// Load Google Maps when NOT on mobile
if ( ! mobile ) {
    dynamicallyLoadScript('https://maps.googleapis.com/maps/api/js?key=wIzaScChUs5NxF3Z5LZoxkAS4wca9A7Pk53I024&callback=initMap');
}

（JS 密钥是假的）。

结果：这在我第一次加载网站时确实有效。我看到 google-map.js 已加载，Google Maps 脚本标记已添加到头部，并且两个资源都已加载并且运行良好。但有时（！）当我刷新时，地图停止加载，经过检查，我看到脚本标签已成功添加，并且资源已加载，但 initMap() 回调函数尚未触发。如果我去控制台，它确实会触发。

由于这种情况仅在某些时候发生（并且永远不会在没有缓存的新负载时发生），我认为这可能与竞争条件或缓存的工作方式有关。但我不确定如何解决它。想法？

标签： javascriptgoogle-maps

解决方案

简而言之：这不是一个非常优雅的解决方案恕我直言，但我认为我需要创建一些重试逻辑，以便在它应该运行之前加载 initMap()。换句话说，我将此诊断为缓存可用时出现的竞争条件。

实现：添加了一个小功能，每 0.1 秒检查一次 DOM 是否具有仅在地图完全加载时才存在的元素。如果是，则计时器停止，否则，它将运行 initMap() 函数。

function checkMaps() {
    if (document.getElementsByClassName("gm-style").length == 0) {
        initMap();
    } else {
        clearInterval(checker);
    }
}

checker = setInterval(checkMaps, 100);

推荐阅读