Reactjs 如何将自定义html创建的设计嵌入到我正在使用的谷歌地图包中？

目前我正在使用标记来显示标记，而不是这个。我想向标记显示自定义html设计。

GoogleMap API定义了一个MarkerWithLabel组件，该组件可以传递给GoogleMap组件。这里有一个例子

<GoogleMap
defaultZoom={8}
defaultCenter={{ lat: -34.397, lng: 150.644 }}>

    <MarkerWithLabel
      position={{ lat: -34.397, lng: 150.644 }}
      labelAnchor={new google.maps.Point(0, 0)}
      labelStyle={{backgroundColor: "yellow", fontSize: "32px", padding: "16px"}}
    >
      <CustomizedMarker />
    </MarkerWithLabel>
</GoogleMap>

通过在单独的组件中分离标记的标记，可以向标记添加标签，如下所示：

class CustomizedMarker extends Component{
constructor(props){
    super(props)
    this.state = {
    labelHidden : true
    }
}
toggleLabel = ()=>{
    this.setState({
        labelHidden: !this.state.labelHidden
    })
}
render(){
    return(
        <div onClick={this.toggleLabel}>
            <p>Hello World</p>
            <h5 hidden={this.state.labelHidden}>Your Label</h5>
        <div>
    )
}
}

类CustomizedMarker扩展组件{
建造师（道具）{
超级（道具）
此.state={
labelHidden：真的
}
}
toggleLabel=（）=>{
这是我的国家({
labelHidden:！this.state.labelHidden
})
}
render（）{
返回(
你好，世界

你的标签
)
}
}

---

您可以查看完整的参考资料

您使用哪种API集成谷歌地图？是的谷歌API。react google maps软件包。点击这个标签，我如何才能获得信息框？我已经编辑了原始答案，将其纳入其中。