всплывающее окно информации при нажатии на кнопку (не на карте) - PullRequest
Новая
       29

всплывающее окно информации при нажатии на кнопку (не на карте)

0 голосов
/ 17 декабря 2018

я новичок в реакции.Я пытаюсь открыть окно информации на карте, когда пользователь нажимает на кнопку из другого компонента.Я использую библиотеку Google-Map-реагировать.так что мне удастся получить информацию о местоположении на карте компонента, но я не знаю, как я продолжу.это мой код: 

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-реагировать?

...