Как встроить пользовательский HTML созданный дизайн в маркер в Google Map Я использую реагировать-Google-карты Packahe?

Question

В настоящее время я использую тег для показа маркера, вместо этого я хочу показать собственный HTML-дизайн для маркера.

Answer 1

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

Вы можете просмотреть полный справочник здесь