谷歌未定义：如何检查是否在 React 中加载了谷歌地图脚本

Question

当我在我的 React 项目中加载包含地图的组件时，有时会收到“google is undefined”。原因似乎是在互联网连接不够好的情况下，google api脚本没有及时加载。

我正在像这样在 app.js 中加载地图 api 脚本。

componentWillMount() {
    const API_KEY = process.env.GOOGLEMAP_API_KEY;
    const script = document.createElement('script');
    script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}`;
    script.async = true;
    script.defer = true;
    document.head.append(script);
  }

有没有办法在返回 renderApp 之前检查谷歌地图脚本是否已加载或在应用程序的其他地方使用检查？我曾尝试使用 typeOf google 和 typeOf google.maps，但它们只是返回未定义。

renderApp() {
      return (
        <div>
          <Header />
          <Main />
        </div>
      );
  }

render() {
    return (
      <div>
        {this.renderApp()}
      </div>
    );
  }

除了使用库 react-async-script-loader 之外，我如何在渲染组件之前检查谷歌地图是否可用。 React-async-script-loader 可能是解决方案，但它需要对我的地图组件进行一些重大改造。

我在网上找到了一些讨论，但似乎没有任何效果。

Answer 1

您可以在 url 中传递一个回调参数。加载异步文件时会调用它。

当 API 准备就绪时，它将调用使用指定的函数 回调参数。

&callback=initMap

例子：

"https://maps.googleapis.com/maps/api/js?${API_KEY}&callback=initMap"