Reactjs 如何使用react google maps在地图上方添加单独的搜索框

我在react中创建了一个组件，我想要一个单独的搜索框，而不是嵌入地图本身。我一直在寻找这样做的教程，但运气不好，而且我发现google maps react文档有点混乱，因为它使用了一个HOC、compose来简化地图

    const Map = withScriptjs(withGoogleMap(props => {
  return (
      <div className="map-wrap">
        <div className="map-searchbox"><input placeholder="Enter Address" /></div>
        <div className="map">
          <GoogleMap
            defaultZoom={14}
            center={{lat: 42.3601, lng: -71.0589}}
          />
        </div>
      </div>
    )
  }
))

const Map=withScriptjs（withGoogleMap（props=>{
返回(
)
}
))

只需在containerElement上添加一个样式即可

<GoogleMap
  defaultZoom={14}
  center={{lat: 42.3601, lng: -71.0589}}
  containerElement={<div style={{height:`500px`,width:`50%`,display:'flex',flexDirection:'column-reverse' }} />}
/>

---

如果我没弄错你的问题，那你说的是google Places的搜索框。为此，我制作了一个codesandbox，您只需要添加您的API键（在该键上启用PlacesAPI），然后它就会像一个符咒一样工作。 代码沙盒：

请随时提问