如何使用 react-google-maps 为使用 create-react-app 创建的 React 应用添加 Google Maps API 密钥？

Question

我正在尝试使用https://tomchentw.github.io/react-google-maps/#introduction 的第 5 步中给出的示例组件，

import React from "react"
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

const MyMapComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} onClick={props.onMarkerClick} />}
  </GoogleMap>
))

class MyFancyComponent extends React.PureComponent {
  state = {
    isMarkerShown: false,
  }

  componentDidMount() {
    this.delayedShowMarker()
  }

  delayedShowMarker = () => {
    setTimeout(() => {
      this.setState({ isMarkerShown: true })
    }, 3000)
  }

  handleMarkerClick = () => {
    this.setState({ isMarkerShown: false })
    this.delayedShowMarker()
  }

  render() {
    return (
      <MyMapComponent
        isMarkerShown={this.state.isMarkerShown}
        onMarkerClick={this.handleMarkerClick}
      />
    )
  }
}

在使用 create-react-app 创建的 React 应用程序中。我已将上述代码添加到components/Map.js，在class MyFancyComponent 之前添加了export，并将App.js 修改为以下内容（参见https://github.com/khpeek/beomaps/blob/master/src/App.js）：

import React from 'react';
import './App.css';

import { MyFancyComponent } from "./components/Map"

function App() {
  return (
    <div className="App">
      <MyFancyComponent/>
    </div>
  );
}

export default App;

但是，如果我运行 npm start 并导航到 localhost:3000，我会看到以下错误：

所以我看到一个错误，

您已超出此 API 的请求配额。

还有一个警告，

Google Maps JavaScript API 警告：NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

根据那个警告，

加载 API 的脚本元素没有 API 密钥。请确保您包含有效的 API 密钥作为密钥参数。您可以在 Google Cloud Platform Console 上生成新的 API 密钥。

据我了解https://github.com/tomchentw/react-google-maps/issues/275，可以通过添加来解决此问题

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY" type="text/javascript"></script>

到index.html。然而，在这个使用create-react-app 创建的示例中，没有index.html，只有index.js，所以我不清楚如何应用这个建议。

任何想法如何将 API 密钥添加到此示例中？

Answer 1

您需要通过key=YOUR_API 设置您的 Google 地图 API googleMapURL:"https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",

就像在Docs中一样

googleMapURL:"https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",