时间戳

首页 > 解决方案 > 使用 react-google-maps 渲染自定义组件 - ReactJS

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

问题描述

我想向地图添加一个自定义标记组件，但我注意到 usingreact-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>
...

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

标签： javascriptreactjsreact-google-maps

解决方案

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

推荐阅读