ES6环境下Google Maps API的CORS及加载错误解决方案咨询

核心原因 #

Google Maps API本身不支持通过ES6模块的import语法直接加载远程URL（会触发CORS错误），同时内置了来源检测机制，禁止本地拷贝源码加载（会抛出NotLoadingAPIFromGoogleMapsError），必须通过官方指定的script标签方式加载。

正确解决方案 #

方式1：动态创建script标签加载（官方推荐）

在ES6模块中通过JS动态生成script标签，指定官方CDN地址、API密钥和加载完成后的回调，确保API从官方源加载：

function loadGoogleMapsAPI() {
  return new Promise((resolve, reject) => {
    // 避免重复加载
    if (window.google?.maps) {
      resolve(window.google.maps);
      return;
    }

    const script = document.createElement('script');
    // 替换成你的API密钥，callback参数指定全局回调函数名
    script.src = `https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initGoogleMaps`;
    script.async = true;
    script.defer = true;

    // 注册全局回调，API加载完成后触发
    window.initGoogleMaps = () => {
      resolve(window.google.maps);
      // 清理全局函数，避免污染
      delete window.initGoogleMaps;
    };

    // 加载失败处理
    script.onerror = () => {
      reject(new Error('Google Maps API加载失败'));
      delete window.initGoogleMaps;
    };

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

// 初始化地图示例
async function initMap() {
  try {
    const maps = await loadGoogleMapsAPI();
    new maps.Map(document.getElementById('map'), {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 8,
    });
  } catch (err) {
    console.error(err);
  }
}

// 触发初始化
initMap();

方式2：HTML中直接引入script标签

如果项目允许在HTML中提前加载API，可直接在<head>中添加标签，再在ES6模块中等待全局对象就绪：

<!-- HTML文件的<head>内 -->
<script src="https://maps.googleapis.com/maps/api/js?key=你的API密钥" async defer></script>

// ES6模块中
async function initMap() {
  // 等待google.maps全局对象加载完成
  while (!window.google?.maps) {
    await new Promise(resolve => setTimeout(resolve, 100));
  }

  const maps = window.google.maps;
  // 执行地图初始化逻辑
  new maps.Map(document.getElementById('map'), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}

initMap();

关键注意事项 #

• 必须使用官方CDN地址加载API，绝对不能本地保存源码，否则会触发来源验证错误。
• 确保你的API密钥已在Google Cloud控制台配置了正确的HTTP引用限制（允许当前域名访问）。

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