React项目Google Maps API出现NoApiKeys警告及水印问题求助

算力阿峰

2026-7-8

解决React中Google Map无API密钥警告及水印问题

问题根源

你的代码里用process.env.key获取API密钥，但React项目对自定义环境变量有强制命名规则——非REACT_APP_前缀的变量会被默认忽略，导致API密钥根本没传到Google Maps API里，所以才会触发无密钥警告，地图也显示水印。

修正环境变量命名
在项目根目录（和package.json同级）新建或修改.env文件，把密钥变量改成REACT_APP_开头：
```
REACT_APP_GOOGLE_MAPS_API_KEY=你的实际Google Maps API密钥
```

更新组件中的密钥引用
修改useJsApiLoader的配置，替换成正确的环境变量名：

const { isLoaded } = useJsApiLoader({
  googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
});

重启开发服务器
环境变量修改后必须重启React开发服务，否则新的变量不会生效。
验证密钥加载状态
在组件里加个日志，确认密钥是否成功读取：
```
console.log('加载的API密钥:', process.env.REACT_APP_GOOGLE_MAPS_API_KEY);
```
如果打印结果是undefined，检查.env文件位置是否正确，变量名有没有拼写错误。
检查GCP侧配置
确保在Google Cloud Platform里已经启用了Maps JavaScript API，且API密钥没有设置IP限制、应用限制等会导致调用失败的规则。