Question

我正在建立带有可点击标记的google地图，其中标记信息隐藏在div元素中。我想让每个标记切换我创建的“隐藏”类。

这是我的地图的呈现方式：

render() {
if (!this.props.loaded) {
  return <div>Loading...</div>
}

return (

  <div style={style}>

    <div className="profile-container">
      <div className="marker-profile hide">
        <h1>{this.state.selectedPlace.name}</h1>
        <h5>{this.state.selectedPlace.tag}</h5>
        <h5>{this.state.selectedPlace.hours}</h5>
        <h5>{this.state.selectedPlace.address}</h5>
        <p><a href={this.state.selectedPlace.website} className="enter">{this.state.selectedPlace.website}</a></p>
      </div>
    </div>

    <Map
      item
      xs={12}
      google={this.props.google}
      onClick={this.onMapClick}
      zoom={13}
      initialCenter={{ lat: 39.3643, lng: -74.4229 }}>

        <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'Salvation Army'}
          address={'22 S. Texas Avenue'}
          hours={'Mon-Fri 9am-11:45am & 1pm-3pm'}
          phone={'609-344-0660'}
          website={'https://www.salvationarmy.org'}
          position={{lat: 39.3549, lng: -74.4429}} />

        <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'Turning Point'}
          tag={'Day Center for Homeless'}
          address={'1717 Bishop Richard Allen Avenue'}
          hours={'Mon-Sat 8am-10pm & 2pm-1pm'}
          phone={'609-428-6163'}
          website={'https://www.facebook.com/TurningPointDayCenter'}
          position={{lat: 39.3656463, lng: -74.43630430000002}} />

        <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'Zion Redevelopment'}
          address={'525 Atlantic Avenue'}
          hours={'Wed 11am-1pm'}
          phone={'609-348-9304'}
          position={{lat: 39.366664, lng: -74.41770839999998}} />

        <Marker
          onClick={this.onMarkerClick}
          title={'The marker`s title will appear as a tooltip.'}
          name={'AC Rescue Mission'}
          address={'2009 Bacharach Boulevard'}
          hours={'Mon-Sun 10-11:30am'}
          phone={'609-345-5517'}
          website={'https://www.acrescuemission.org'}
          position={{lat: 39.3650061, lng: -74.44001409999998}} />
      </Map>
  </div>
)}}

我试图使用jQuery创建click事件，但是由于某种原因，我无法触发它。基本上，在标记上单击I，以切换隐藏和显示“配置文件容器”类。任何建议将不胜感激。

Answer 1

我想出了解决方案，我必须做几件事：

我创建了一个构造函数，将显示状态设置为false。

代码：

constructor(props) {
super(props)

this.state = { show : false };

this.onMarkerClick = this.onMarkerClick.bind(this)}

然后将其绑定到onMarkerClick处理程序。

我将show选项添加到了onMarkerClick处理程序。

onMarkerClick = (props, marker, e) => {
const { show } = this.state;
this.setState({
  selectedPlace: props,
  activeMarker: marker,
  show : !show
})}

最后，我包装了要隐藏在JSX表达式中的div，然后在每个标记中添加了onClick方法。

   { this.state.show &&
      <div className="profile-container">
        <div className="marker-image">
          <img className="marker-img" src={this.state.selectedPlace.img} alt={this.state.selectedPlace.name} />
          <h1>{this.state.selectedPlace.name}</h1></div>
        <div className="marker-profile">
          <h1><i className="fas fa-map-marker map-icon-marker"></i>{this.state.selectedPlace.address}</h1>
          <div className="maker-profile-body">
            <h5 className="one"><i className="fas fa-phone map-icon-marker"></i>{this.state.selectedPlace.phone}</h5>
            <h5 className="two"><i className="fas fa-globe map-icon-marker"></i><a href={this.state.selectedPlace.website} className="enter">Website</a></h5>
            <h5 className="third"><i className="fas fa-door-open map-icon-marker"></i>{this.state.selectedPlace.hours}</h5>
          </div>
        </div>
      </div> }

反应谷歌地图标记单击事件切换类

1 个答案: