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

Question

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

如果我单击列表中的“x”或标记，我可以关闭信息窗口。但我不确定如何自动关闭其他 InfoWindow 并且只打开当前标记的 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 匹配的信息窗口。

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

我想切换单个窗口，但还需要知道这些位置在父组件上是否“活动”。因此，在父组件中，我使用活动键声明了。我将其作为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>

在父组件中，我有 state = {activeKey: ""} 和以下方法：

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

两者都是在 props 中传下来的：

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

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