如何为使用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，在export之前添加了class MyFancyComponent，并将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 Maps 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",