Laravel5.5中使用InfoBox报错：ReferenceError: InfoBox is not defined求助

我之前在使用Google Maps v3的InfoBox插件时也碰到过一模一样的问题，大概率是脚本加载的顺序、时机或者路径出了问题，给你几个具体的排查和解决步骤：

• 确保脚本加载顺序正确
  InfoBox完全依赖Google Maps API，所以必须先加载Google Maps核心脚本，再加载infobox.js。在Laravel的Blade模板里，你要保证标签顺序是这样的：

  <!-- 先加载Google Maps API -->
  <script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥"></script>
  <!-- 再加载本地的infobox.js -->
  <script src="{{ asset('js/infobox.js') }}"></script>
  

  同时要确认asset()函数指向的路径正确——如果你的infobox.js放在public/js目录下，上面的路径就没问题；如果放在其他位置，要对应调整。

• 检查异步加载的时机问题
  如果你给Google Maps API加了async或defer属性（比如用了callback=initMap），那infobox.js必须等Google Maps完全加载完成后再初始化。这种情况下，你可以动态加载infobox.js并在它加载完成后再创建InfoBox实例：

  function initMap() {
    // 动态创建脚本标签加载infobox.js
    const infoboxScript = document.createElement('script');
    infoboxScript.src = "{{ asset('js/infobox.js') }}";
    infoboxScript.onload = function() {
      // 这里再初始化InfoBox
      const myOptions = {
        content: '<div>自定义信息窗口内容</div>',
        // 其他配置项...
      };
      const ib = new InfoBox(myOptions);
      // 后续绑定标记等操作...
    };
    document.body.appendChild(infoboxScript);
  }
  

• 验证infobox.js文件的正确性
  有时候下载的文件可能有损坏或者版本不兼容，你可以打开本地的infobox.js文件，检查末尾是否有暴露全局变量的代码（比如window.InfoBox = InfoBox;）。如果没有的话，手动加上这行代码，确保InfoBox能被全局访问到。另外要确认你用的是适配Google Maps v3的版本，不要用旧版本的插件。

• 排查Laravel Mix的编译问题
  如果你用Laravel Mix来编译前端资源，要确保infobox.js没有被错误地压缩混淆或者被tree shaking移除。你可以直接在模板中单独引入infobox.js（不通过Mix编译），或者在webpack.mix.js里把它添加到编译入口中，比如：

  mix.js(['resources/js/app.js', 'resources/js/infobox.js'], 'public/js');
  

按照上面的步骤排查，应该能解决InfoBox is not defined的问题。

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