Question

我目前正在使用react-google-maps，我可以通过单击标记（从地图或列表中）正确显示标记和InfoWindow。但是一旦我点击标记打开，即使我选择了一个新标记，之前的InfoWindow也会保持打开状态。

如果我点击＆＃39; x＆＃39;我可以关闭InfoWindow。或列表中的标记。但我不确定如何自动关闭其他InfoWindows，只打开当前标记的InfoWindow。

我已经查看过几个类似的问题，以便提出一个想法：When displaying multiple markers on a map, how to open just one info window, when clicking on a marker?，React-Google-Map multiple Info window open 。

但我仍然无法通过并检查唯一标记，以便只显示与标记ID匹配的InfoWindow。

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;

Answer 1

我想切换个别窗口，但也需要知道这些位置是否活跃＆＃34;在父组件上。因此，在父组件中，我使用活动密钥表示。我将其作为activeKey组件传递给Map，并将所有位置数据作为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>

在父组件中，我有state = {activeKey：＆＃34;＆＃34;}以及以下方法：

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

两者都在道具中传承下来：

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

请注意，如果您不要求父状态组件中存在此状态，则可以在地图组件中执行此操作。

React Google Maps InfoWindow一次切换显示一个

1 个答案: