Google Autocomplete API回调指向JS模块内函数的解决方案咨询

回调无法触发的最优修复方案 #

Google Maps API加载完成后会从全局window对象查找你指定的回调函数，而ES模块内定义的函数默认是模块私有，不会暴露到全局，自然触发失败。修复有两种可选方案，优先推荐第二种模块化加载的方式：

• 静态引入修复：如果保留HTML里的原有script标签，只需要在模块内定义initAutocomplete后加一行window.initAutocomplete = initAutocomplete，把函数手动挂载到全局即可。如果担心全局污染，可以在回调执行完成后加delete window.initAutocomplete清理全局变量。
• 模块化动态加载：完全把API引入逻辑移到JS模块内，不需要修改HTML，也不用硬编码全局回调，更符合现代前端开发规范。

JS模块内动态加载API的实现代码 #

// 模块内原有回调逻辑，不需要做任何修改
function initAutocomplete() {
  const autocompleteInput = document.getElementById('your-input-id');
  const autocomplete = new google.maps.places.Autocomplete(autocompleteInput, {
    types: ['geocode']
    // 其他配置项
  });
  // 绑定事件、业务逻辑等
}

// 封装API加载逻辑，支持多次调用不会重复加载
function loadGoogleAutocompleteAPI(apiKey) {
  return new Promise((resolve, reject) => {
    // 已加载过直接返回成功
    if (window.google?.maps?.places) {
      initAutocomplete();
      return resolve();
    }

    // 临时挂载全局回调
    window.initAutocomplete = () => {
      initAutocomplete();
      // 加载完成后清理全局变量避免污染
      delete window.initAutocomplete;
      resolve();
    };

    // 动态创建script标签
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places&callback=initAutocomplete`;
    script.async = true;
    script.defer = true;
    // 加载异常处理
    script.onerror = () => {
      delete window.initAutocomplete;
      reject(new Error('Google Autocomplete API加载失败'));
    };

    document.head.appendChild(script);
  });
}

// 模块内调用即可，不需要修改HTML代码
loadGoogleAutocompleteAPI('替换为你的实际API密钥')
  .then(() => console.log('地址自动补全初始化成功'))
  .catch(err => console.error(err));

该实现的优势：可以控制API加载时机（比如用户进入对应功能页再加载，减少首屏体积）、自带重复加载防重、错误处理更灵活，完全适配模块化开发场景。

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