使用 react-google-maps 渲染自定义组件 - ReactJS答案

【问题标题】：Render a custom component using react-google-maps - ReactJS使用 react-google-maps 渲染自定义组件 - ReactJS
【发布时间】：2021-05-28 03:52:20
【问题描述】：

我想向地图添加一个自定义标记组件，但我注意到使用 react-google-maps/api 不会呈现自定义组件。作为一个简单的例子，我使用了以下代码：


const AnyReactComponent = ({ text }) => <div>{text}</div>;

...
   <GoogleMap
          mapContainerStyle={containerStyle}
          center={this.props.center}
          zoom={this.props.zoom}
        >

          {<AnyReactComponent lat={38.26} lng={-7.61} text="My Marker" />}

   </GoogleMap>
...

用这个框架可以做这样的事情吗？此外，是否可以将按钮组件添加到信息框，或者在单击标记时呈现选项部分？

【问题讨论】：

标签： javascript reactjs react-google-maps

【解决方案1】：

由于react-google-maps/api 对谷歌的 API 进行了如此多的包装，这似乎不太可能。因此，您将仅限于包的组件，但我推荐它用于更简单的目标，因为有很多可用的文档。请注意，react-google-maps 不再维护，但此项目由react-google-maps/api 继续。

【讨论】：