我使用名为 create-react-app 的 cli 创建了一个 React 应用程序。看起来 Facebook 在底层做了很多事情，比如 webpack 等。但是，我猜它可能也有一些限制。我尝试按照本教程加载谷歌地图 api。当我调试我的代码时，我可以看到谷歌地图已被成功引用。
.
但是然后我单击播放并让应用程序完成运行。我从 webpackHotDevClient.js 得到 google is not defined 错误，我的应用程序崩溃了。
由于 webpack 即时编译文件，我认为通过 https 加载谷歌地图有问题吗？
有什么想法吗？
正如用户指南中提到的，您需要从window. 把它放在文件的顶部，它会起作用：
const google = window.google;
我们强制这样做的原因是因为人们通常会误解局部变量、导入module和全局变量之间的区别，因此我们希望在使用全局变量时始终在代码中明确说明。
顺便说一下，这与 Webpack 或 HTTPS 无关。您看到这一点是因为我们使用了禁止未知全局变量的 linting 规则。
我认为当您从 html 脚本导入谷歌地图时，谷歌变量已经可用。此错误由 Eslint 引起，您可以尝试将以下行添加到文件顶部以禁用 ESlint
/*global google*/
嗨，你可以这样使用withGoogleMap：
import { withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps";
const google = window.google;
class MapComponent extends Component {
....
<GoogleMap>
.....
.....
.....
</GoogleMap>
export default withGoogleMap(MapComponent);
我有一个更好的解决方案然后@Dan 你可以这样做
window.google = window.google ? window.google : {}
或者
const google = window.google = window.google ? window.google : {}
如果google可用，则没有问题，如果不可用，则在加载脚本之前将分配空。
.eslintrc.json
{
// ...
"globals": {
"google": "readonly"
}
}