Leaflet地图搭配Google Map瓦片偶现initMap未定义问题求助

嘿，这个时好时坏的initMap is not a function报错确实挺磨人的，尤其是Chrome里发作更频繁，我来帮你拆解下大概率的原因和对应的解决办法：

• 加载顺序搞反了
  这是最常见的原因：如果你在Google Maps的脚本标签里加了callback=initMap，但你的initMap函数是定义在Google脚本之后加载的文件里，就会出现“有时加载快能赶上，有时加载慢赶不上”的情况——Chrome的资源加载调度更严格，所以出现频率更高。
  解决办法：
  要么把定义initMap的脚本放在Google Maps脚本之前，要么改成动态加载Google脚本，确保函数已经定义好再触发：

  // 先全局定义你的initMap函数
  window.initMap = function() {
    // 你的Leaflet + Google瓦片初始化逻辑
    const map = L.map('map').setView([51.505, -0.09], 13);
    L.tileLayer('https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
      attribution: '© Google'
    }).addTo(map);
  };
  
  // 动态加载Google Maps脚本，确保函数已存在
  const gmapsScript = document.createElement('script');
  gmapsScript.src = 'https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap';
  gmapsScript.async = true;
  document.body.appendChild(gmapsScript);
  

• 异步竞态条件干扰
  页面上其他异步资源（比如接口数据、第三方脚本）可能打乱Google Maps的加载时序，导致initMap还没准备好就被触发。
  解决办法：放弃依赖Google脚本的callback参数，改成手动在页面就绪后触发，还可以加个重试机制确保API加载完成：

  // Google脚本标签去掉callback参数，比如：
  // <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥" async></script>
  
  // 定义你的初始化函数
  function initMap() {
    // 你的地图逻辑...
  }
  
  // 页面就绪后检查并初始化
  document.addEventListener('DOMContentLoaded', () => {
    let retryTimes = 0;
    const checkGmapsReady = setInterval(() => {
      if (typeof google !== 'undefined' && google.maps) {
        initMap();
        clearInterval(checkGmapsReady);
      } else if (retryTimes >= 3) {
        clearInterval(checkGmapsReady);
        console.error('Google Maps API加载超时，请检查网络或API密钥');
      }
      retryTimes++;
    }, 500);
  });
  

• Chrome预加载/缓存的锅
  Chrome的预加载功能有时会提前拉取脚本，但可能打乱加载顺序，导致函数未定义。你可以暂时关闭Chrome的预加载（设置→隐私和安全→预加载页面以提高浏览速度和性能）测试一下，如果问题消失，那上面的动态加载方案就能彻底解决。

• 函数作用域没搞对
  确保initMap是全局作用域的函数，别把它放在局部作用域里（比如立即执行函数、模块内部），否则Google Maps脚本找不到它。最简单的方式就是把函数挂载到window对象上，像第一个方案里那样window.initMap = function() {...}。

内容的提问来源于stack exchange，提问作者user2871257