google autocomplete在react中放置api

npm install react-google-maps

import React from 'react';
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

class AutocompleteInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      address: ''
    };
    this.handleAddressChange = this.handleAddressChange.bind(this);
  }

  handleAddressChange(address) {
    this.setState({ address });
  }

  render() {
    const { address } = this.state;
    return (
      <div>
        <input
          type="text"
          placeholder="Enter address"
          value={address}
          onChange={(e) => this.handleAddressChange(e.target.value)}
        />
        <GoogleMap
          defaultZoom={8}
          defaultCenter={{ lat: -34.397, lng: 150.644 }}
        >
          {address && (
            <Marker
              position={{ lat: -34.397, lng: 150.644 }}
            />
          )}
        </GoogleMap>
      </div>
    );
  }
}

export default withGoogleMap(AutocompleteInput);