Question

我在react中创建了一个组件，我想要一个不嵌入地图本身的单独搜索框。我一直在寻找可以做到这一点的教程，但是没有运气，而且我发现google-maps-react文档有点混乱，因为它利用了HOC（撰写）来简化地图。

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

Answer 1

只需在containerElement上放置样式即可。

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

Answer 2

如果我对您的问题的回答正确，那么您是在谈论Google地方信息的searchBox。为此，我做了一个codeandbox，您只需要添加您的API密钥（在该密钥上启用Places API），然后它就像一个超级按钮一样工作。密码框：https://codesandbox.io/s/qqzm67ykmq

随时问任何问题。

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

2 个答案: