React项目集成Google Maps API出现加载报错的问题咨询

• 移除冗余的手动API引入
  google-map-react 组件会通过传入的bootstrapURLKeys参数自动完成Google Maps API加载，不需要额外在index.html中手动引入API脚本。直接删除index.html里之前添加的那段带错误密钥的引入脚本即可，重复引入会造成加载冲突、密钥不匹配问题。
• 修复ApiNotActivatedMapError核心报错
  • 当前代码存在两个不一致的API密钥：组件内配置的AIzaSyAEKXIE54WnL96aA4qln5bEzU3uOGKqhyo、原手动脚本里的AIzaSECsV11t3FDisUFwLb5btHY-EWcP24uio，需要统一替换为同一个有效密钥
  • 在Google Cloud控制台，针对该统一密钥激活Maps JavaScript API服务，未激活对应服务是触发该错误的根本原因
  • 给该密钥配置访问限制，将开发环境地址http://localhost:3001加入允许的来源列表
• 解决CORS跨域拦截报错
  控制台提示的跨域拦截、缺失Access-Control-Allow-Origin响应头的报错，是错误密钥发起的API请求返回404状态引发的连带提示。完成前面两步修正后，该CORS报错会自动消失，不需要手动将请求模式调整为no-cors，否则会隐藏真实的API调用错误。
• 修正依赖包匹配问题
  你提到安装的是react-google-map包，但代码中实际引入的是google-map-react，二者是功能、API完全不同的两个第三方包。需要卸载不匹配的react-google-map包，安装和引入名一致的google-map-react依赖，避免因包版本不匹配引发其他运行异常。

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