Реагируйте на Google Maps InfoWindow, чтобы переключать отображение по одному - PullRequest
Новая
       26

Реагируйте на Google Maps InfoWindow, чтобы переключать отображение по одному

0 голосов
/ 17 мая 2018

В настоящее время я использую реагировать-google-карты, и я могу правильно отобразить маркер и InfoWindow, нажав на маркер (с карты или из списка).Но как только я нажимаю на маркер, чтобы открыть, предыдущее InfoWindow остается открытым, даже когда я выбираю новый.

react-google-maps-screenshot

Я могу закрыть информационное окно, если я нажму на «х» или маркер из списка.Но я не уверен, как автоматически закрывать другие InfoWindows и открывать только InfoWindow текущего маркера.

Я рассмотрел несколько похожих вопросов, чтобы понять: При отображении нескольких маркеров на карте, какчтобы открыть только одно информационное окно, при нажатии на маркер? , React-Google-Map множественное информационное окно открыть .

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

class MarkerInfoList extends Component {

  constructor(props){
    super(props);

    this.state = {
      isOpen: false
    };
  }

  handleToggleOpen = (markerId) => {
    this.setState({ 
      isOpen: true
    });
  }

  handleToggleClose = (markerId) => {
    this.setState({
      isOpen: false
    });
  }


render() {

  const isOpen = this.state.isOpen;

  return (

    <div>
      {this.state.isOpen ? (
        <ul>
          <li onClick={() => this.handleToggleClose()}>{this.props.venue}</li>

          <Marker
            key={this.props.index}
            id={this.props.index}
            position={{ lat: this.props.lat, lng: this.props.lng}}
            defaultAnimation={google.maps.Animation.DROP}
            onClick={() => this.handleToggleOpen(this.props.index)}>

            <InfoWindow 
                id = {this.props.index}
                onCloseClick={() => this.setState({isOpen: false})}>
                <div key={this.props.index}>
                  <h4>{this.props.venue}</h4>
                </div>
            </InfoWindow>  
          </Marker>
        </ul>

      ) : (

        <ul>
          <li onClick={() => this.handleToggleOpen()}>{this.props.venue}</li> 
        </ul>

      )
    }

  </div>

    )
  }
}

export default MarkerInfoList;

1 Ответ

0 голосов
/ 19 мая 2018

Я хотел переключать отдельные окна, но также должен был знать, были ли местоположения «активными» на родительском компоненте. Таким образом, в родительском компоненте у меня есть с активным ключом. Я передаю это на карту как компонент activeKey, а также в первоначальный список со всеми данными о местоположении как locations. 

 <GoogleMap defaultZoom={16} defaultCenter={this.state.currentLocation}>
        {this.props.locations.map((location, i) => (
          <Marker
            key={location.key}
            position={{
              lat: location.latitude,
              lng: location.longitude
            }}
            onClick={() => {
              this.props.toggleLocationsActive(location.key);
              // this.setCurrentLocation(location.latitude, location.longitude);
            }}
          >
                      {location.key === this.props.activeKey && (
          <InfoWindow onCloseClick={props.onToggleOpen}>
            <div>
              {location.orgName}
              {location.orgName !== location.programName &&
                "/" + location.programName}
            </div>
          </InfoWindow>
        )}
          </Marker>
        ))}
      </GoogleMap>

В родительском компоненте у меня было состояние = {activeKey: ""} и следующий метод: 

  toggleLocationsActive = locationKey => {
    this.setState({
      activeKey: locationKey
    });
  };

Обе передаются в реквизитах: 

   <Map
            activeKey={this.state.activeKey}
            toggleLocationsActive={this.toggleLocationsActive}
          />

Обратите внимание, что если вы не хотите, чтобы это состояние существовало в родительском компоненте, вы можете сделать это в компоненте карты.

...