Question

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

Answer 1

GoogleMap API定义了可以传递给GoogleMap组件的MarkerWithLabel组件。这是一个例子

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

您可以查看完整的参考文献here

如何在Google Map中将自定义html创建的设计嵌入到Marker中，我正在使用react-google-maps packahe？

1 个答案: