React集成Google Places API自动补全功能遇ApiNotActivatedMapError报错求助

嘿，我看了你遇到的问题，咱们一步步来排查这个ApiNotActivatedMapError的原因，毕竟这个报错虽然提示明确，但有时候坑点还挺多的：

首先确认API密钥的一致性 #

你在index.html里硬编码的API密钥，和组件里process.env.REACT_APP_GOOGLE_MAPS_API_KEY对应的密钥是不是同一个？很多时候本地环境变量配置错了，或者index.html里的key是旧的测试密钥，导致用了一个没开通Places API的密钥，自然会报这个错。建议直接把index.html里的key换成环境变量里的那个，保持一致：

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=%REACT_APP_GOOGLE_MAPS_API_KEY%"></script>

（注意React的index.html里要使用%变量名%的格式来读取环境变量，不能直接写process.env）

再仔细核对API启用情况（别进错项目！） #

虽然你说已经开了相关API，但再去Google Cloud Console仔细检查一遍：

• 先确认你当前操作的项目，就是你API密钥所属的项目（很多人会同时开多个项目，一不小心进错就白忙活了）
• 确认Places API (New) 和 Maps JavaScript API 都已经启用（前者是自动补全的核心，后者是加载maps脚本的基础）
• 另外，API启用后有时候会有5-10分钟的生效延迟，尤其是刚开通billing之后，别急着马上测试，等一会儿再试

检查API密钥的限制设置 #

进入Google Cloud的「API和服务」→「凭据」页面，找到你的API密钥，查看应用限制：

• 如果设置了「HTTP 引用网站」限制，一定要把你的开发环境地址加进去，比如http://localhost:3000/*、http://127.0.0.1:3000/*，不然本地请求会被拦截
• 测试阶段可以暂时取消应用限制（生产环境千万别这么做），如果取消后自动补全正常了，那就是referrer设置的问题，把正确的地址加回去就行

调整脚本加载和初始化时机 #

你现在的useEffect是在组件mount时检查window.google，但有时候脚本可能还在异步加载中，导致google.maps.places还没就绪。可以试试两种优化方式：

1. 给脚本加回调参数，确保加载完成后再初始化：

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=YOUR_KEY&callback=initAutocomplete"></script>

然后在全局或者组件里定义initAutocomplete函数，或者用React状态跟踪脚本加载状态，再执行Autocomplete初始化。
2. 在组件里动态加载脚本，比如用useEffect动态创建script标签，加载完成后再初始化：

useEffect(() => {
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?libraries=places&key=${apiKey}`;
  script.async = true;
  script.onload = () => {
    if (document.getElementById("autocomplete")) {
      new google.maps.places.Autocomplete(document.getElementById("autocomplete"));
    }
  };
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, [apiKey]);

（这里加了对元素存在的判断，避免组件卸载或者还没渲染的情况）

最后检查控制台的详细错误 #

有时候控制台会给出更具体的提示，比如明确说“需要启用Places API”，这时候再回去核对API启用状态就好。

按照这些步骤排查下来，应该能解决这个问题啦！

备注：内容来源于stack exchange，提问作者Kaan Buke