如何在Google Map API URL中添加地方参数以获取特定类型的位置以自动完成

Question

我正在尝试实现自动完成搜索input条，以自动完成在React应用中搜索大学和大学的结果。

我的代码如下：

import React, { Component } from 'react'
import './App.css'
import PlacesAutocomplete from "react-places-autocomplete";

export class App extends Component {
  constructor(props) {
    super(props);
    this.state = { address: '' };
  }

  handleChange = address => {
    this.setState({ address });
  };

  render() {
    return (
      <div>

      <PlacesAutocomplete
      value={this.state.address}
      onChange={this.handleChange}
      onSelect={this.handleSelect}
      // searchOptions={searchOptions}
      shouldFetchSuggestions={this.state.address.length > 3}

    >
      {({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
        <div >


          <input maxLength="50" className="typo"{...getInputProps({ placeholder: "Search Your College" })} />

          <div>
            {loading ? <div>...loading</div> : null}

            {suggestions.map(suggestion => {
              const style = {
                backgroundColor: suggestion.active ? "#41b6e6" : "",
              };
              return (

                <div className="suggestion"  {...getSuggestionItemProps(suggestion, { style })}>
                  {suggestion.description}
                </div>

              );
            })}
          </div>
        </div>
      )}
    </PlacesAutocomplete>
      </div>
    )
  }
}

export default App

而且显然是index.html中的<script>标记

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

According to The gmaps docs，为了仅从以下types中获得选择性结果：school，university，secondary-school和college我需要对其进行修改。但是，我显然没有正确地获取文档，也无法很好地理解它。

所以我想知道格式化网址的正确方法是什么？=> React-Places-Autocomplete docs

Answer 1

请注意，您使用的是地点自动填充，而不是地点搜索。 table 3中列出了支持的自动完成类型：

geocodeaddressestablishment(regions)(cities)

因此使用school等其他类型将无法与自动完成一起使用；仅适用于位置搜索服务。

希望这会有所帮助！