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

Question

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

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

Answer 1

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

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

Render a custom component using react-google-maps - ReactJS

javascript

reactjs

react-google-maps