如何配置Google Maps API与React-Places-Autocomplete实现院校自动补全

别担心，我来帮你搞定这个问题！要让自动补全只返回学院、大学这类教育机构，只需要两步配置：设置组件的搜索选项，确保API调用只请求指定类型的地点。

1. 定义搜索选项，限制地点类型 #

首先，在你的组件里定义一个searchOptions对象，指定要筛选的地点类型。Google Places API支持的教育类类型包括：school、university、secondary_school和college，我们把这些都加入到types数组中：

// 在App组件内部定义（比如render方法上方，或者作为类属性）
const searchOptions = {
  types: ['school', 'university', 'secondary_school', 'college'],
  // 可选：如果需要限制特定国家/地区，添加componentRestrictions
  // componentRestrictions: { country: 'us' }
};

2. 将搜索选项传给PlacesAutocomplete组件 #

把上面定义的searchOptions传给组件的同名属性，同时记得补全你缺失的handleSelect方法（不然选中建议项会报错）：

修改后的完整代码如下：

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 });
  };

  // 补全选中建议项的处理方法
  handleSelect = address => {
    this.setState({ address });
    // 这里可以添加选中后的逻辑，比如调用geocodeByAddress获取经纬度等详细信息
  };

  render() {
    // 定义搜索选项
    const searchOptions = {
      types: ['school', 'university', 'secondary_school', 'college'],
      // 可选：限制地区，比如只搜索印度的学校
      // componentRestrictions: { country: 'in' }
    };

    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

为什么这样配置？ #

react-places-autocomplete组件的searchOptions参数会直接传递给Google Places Autocomplete服务。通过types数组指定我们需要的教育类地点类型，API就会只返回符合这些类型的结果，不会混杂其他类型的地点（比如餐厅、商店）。

另外，你之前的API引入是正确的（已经包含libraries=places），不需要修改URL，所有类型筛选逻辑都通过组件的searchOptions完成即可。

内容的提问来源于stack exchange，提问作者Rahul Ahire