React Google Places Autocomplete React

Question

我是新来使用API​​进行响应的人，我已经使用以下工具安装了该工具：npm install --save react-google-places-autocomplete，并在索引中加载了包含places库的google maps api脚本。 html文件。

至此，我已经添加了一个简单的GooglePlacesAutocomplete组件。在网站上，当我开始键入家乡密西沙加时，加载标志迅速出现并消失，并且出现控制台错误：

“ index.js：1您已经超出了此API的每日请求配额。如果您未设置自定义的每日请求配额，请验证您的项目是否具有有效的结算帐户：http://g.co/dev/maps-no-account有关使用限制和Google Maps JavaScript API服务，请参阅：https://developers.google.com/maps/documentation/javascript/usage“

即使我只键入第一个字母。但是，当我键入“ los”时，对于前两个字母，我会收到与上面相同的错误，但是当输入第三个字母时，会得到位置建议。为什么会这样？

这是我的代码：

import React from 'react';
import './SearchBar.css';
//Used to access google's location autocomplete api and its provided css

import GooglePlacesAutocomplete from 'react-google-places-autocomplete';
import 'react-google-places-autocomplete/dist/index.min.css';

class SearchBar extends React.Component {

   constructor(props) {
     super(props);
     this.state = {
       term:"",
       location:"",
       sortBy: "best_match"
     }
     this.handleTermChange = this.handleTermChange.bind(this);
     this.handleLocationChange = this.handleLocationChange.bind(this);
     this.handleSearch = this.handleSearch.bind(this);
     this.handleSearchByEnter = this.handleSearchByEnter.bind(this);

     //These are the options by which you can sort the returned Yelp object
       this.sortByOptions = {
       'Best Match': "best_match",
       'Highest Rated': "rating",
       'Most Reviewed': "review_count"
     }
   }

     //Gets the CSS class for the sorting option
     getSortByClass(sortByOption) {
       if(this.state.sortBy === sortByOption) {
         return 'active';
       } else {
         return '';
       }
     }
     //This function automatically rerenders the business list when a new sort by option is chosen to reflect it.
     handleSortByChange(sortByOption) {
       //Recall setState is asynchronous, so include a callback function called with updated sortByOption,
        this.setState({
          sortBy: sortByOption,
        }, ()=> {
          this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
        })
     }

     handleTermChange(event) {
       this.setState({
         term: event.target.value
       })
     }

     handleLocationChange(event) {
       this.setState({
         location: event.target.value
       })
     }

     handleSearch(event) {
       this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);
       event.preventDefault();
     }

     handleSearchByEnter(event) {
       if(event.which === 13) {
         document.getElementById('submit').click();
       }
     }
   renderSortByOptions() {
    //Object.keys() returns array of property names
    //Array.map() takes that array and returns another array of list elements with a key of that particular sortByOption
    return Object.keys(this.sortByOptions).map(sortByOption=> {
      let sortByOptionValue = this.sortByOptions[sortByOption];
      //Keys are special react attributes that must be included when rendering list elements
      return <li key={sortByOptionValue} className={this.getSortByClass(sortByOptionValue)} onClick={this.handleSortByChange.bind(this, sortByOptionValue)}>{sortByOption}</li>
    });
  }
  render() {
    return (
      <div className="SearchBar" onKeyPress={this.handleSearchByEnter}>
        <div className="SearchBar-sort-options">
          <ul>
            {this.renderSortByOptions()}
          </ul>
        </div>
        <div className="SearchBar-fields">
          <input placeholder="Search Businesses" onChange={this.handleTermChange}/>
          <input id="location" placeholder="Where?" onChange={this.handleLocationChange}/>
        </div>
        <div>
          <GooglePlacesAutocomplete/>
        </div>

        <div className="SearchBar-submit">
          <a id="submit" onClick= {this.handleSearch}>Let's Go</a>
        </div>
      </div>
    );
  }
}
export default SearchBar;

Answer 1

这是一个非常棒的软件包，您可以集成，您不需要导入任何缩小的CSS或所有其他集成，该软件包都可以处理所有这些]]

https://www.npmjs.com/package/rgpl