Reactjs 如何在google map API URL中添加places参数以获取自动完成的特定位置类型

我正在尝试实现一个自动完成搜索

输入

栏，用于在我的

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

import React，{Component}来自“React”
导入“./App.css”
从“反应位置自动完成”导入位置自动完成；
导出类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={地址：'}；
}
handleChange=地址=>{
this.setState（{address}）；
};
render（）{
返回(
3}
>
{（{getInputProps，suggestions，getSuggestionItemProps，loading}）=>(
{正在加载？…正在加载：null}
{suggestions.map（suggestion=>{
常量样式={
背景色：suggestion.active？#41b6e6:“，
};
返回(
{建议.说明}
);
})}
)}
)
}
}
导出默认应用程序

显然，index.html中的

标记

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

，为了仅从以下方面获得选择性结果：

学校

，

大学

，

中学

和

学院

，我需要修改它。但是，很明显，我没有正确地获取文档，也不能很好地理解文档

所以我想知道格式化url的正确方法是什么？

---

请注意，您使用的是位置自动完成，而不是位置搜索。支持的自动完成类型列在：

geocode

地址

建立

（地区）

（城市）

因此，使用其他类型（如

school

）无法使用自动完成；只使用地点搜索服务

---

希望这有帮助

请注意，您使用的是位置自动完成，而不是位置搜索。支持的自动完成类型列在：

geocode

地址

建立

（地区）

（城市）

因此，使用其他类型（如

school

）无法使用自动完成；只使用地点搜索服务

---

希望这有帮助

您能建议我如何编辑此：

并向其添加限制性参数吗？问题是，您不能。你的剧本就这么好。添加自动完成限制的唯一方法是将

类型

参数修改为上面我的答案中列出的任何值。例如：

类型：[“建立”]

（请参见和）。您能建议我如何编辑此：

，并向其添加限制性参数吗？问题是，您不能。你的剧本就这么好。添加自动完成限制的唯一方法是将

类型

参数修改为上面我的答案中列出的任何值。例如：

类型：[“机构”]

（参见和）。