单击按钮(不在地图上)时弹出一个窗口信息

时间:2018-12-17 19:59:34

标签: reactjs google-map-react

请立即开始。 当用户从其他组件上单击按钮时,我试图在地图上弹出窗口信息。 即时通讯使用google-map-react librery。 因此,我成功获取了要映射组件的位置信息,但我不知道如何继续。 这是我的代码:

class MyMap extends Component {

    state = {
        showingInfoWindow: false,
        activeMarker: {},
        selectedPlace: {},
      };

      onMarkerClick = (props, marker, e) => {
        debugger;
        this.setState({
          selectedPlace: props,
          activeMarker: marker,
          showingInfoWindow: true
        })};

      onMapClicked = (props) => {
        if (this.state.showingInfoWindow) {
          this.setState({
            showingInfoWindow: false,
            activeMarker: null
          })
        }
      };  

      clickedFromList = (location)=>{
      }

      componentDidMount() {
        this.props.onRef(this)
      }
      componentWillUnmount() {
        this.props.onRef(undefined)
      }


  render() {
      let locations;
      debugger;
      if(this.props.locations){
        locations= this.props.locations.map(location =>{
            return <Marker key={location.id} title={location.title}
                           onClick={this.onMarkerClick}
                           position={location.location} 
                           description={location.description}
                           />


        })
      }
    return (
      <div id='map' >
      <Map style={{width: '70%'}} google={this.props.google}  
            zoom={14} initialCenter={{lat: 31.7774208,
                                      lng: 35.23711
                                     }}>

        {locations}    

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}>
            <div>
              <h1>{this.state.selectedPlace.title}</h1>
              <p>{this.state.selectedPlace.description}</p>
            </div>
        </InfoWindow>
      </Map>
      </div>
    );
  }
}

因此位置信息在clickedFromList函数中。 我试图调用onMarkerClick函数,但是我没有标记。 所以有人知道如何从Google-rmap-react中的标记打开信息窗口吗?

0 个答案:

没有答案
相关问题