当我单击单个标记时，React Google Map InfoWindow 会显示所有信息

Question

出于某种原因，当我单击单个标记时，所有 InfoWindow 都会出现。当我单击一个标记时，我预计会显示一个 InfoWindow。有人可以解释为什么所有标记中的所有信息窗口都会出现吗？所以当我关闭它时，InfoWindow 也会关闭。

当我单击目标标记时，预期行为是 InfoWindow 打开。

class VenuesMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
    };
  }

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

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

  render() {
    const venues = this.props.venues;

    let markers;
    let userMarkers = (
      <Marker
        position={{
          lat: Number(latCurrentLocation),
          lng: Number(lngCurrentLocation),
        }}
      />
    );
    if (venues !== null) {
      markers = venues.map((location, i) => {
        const lat = location.venue.location.lat;
        const lng = location.venue.location.lng;
        const index = i + 1;
        return (
          <Marker
            key={i}
            position={{ lat: lat, lng: lng }}
            label={index.toString()}
            onClick={() => this.handleToggleOpen()}
          >
            {this.state.isOpen && (
              <InfoWindow onCloseClick={() => this.handleToggleClose()}>
                <span>Something</span>
              </InfoWindow>
            )}
          </Marker>
        );
      });
    }

    const MapWithAMarker = withGoogleMap(props => (
      <GoogleMap
        defaultZoom={this.state.zoom}
        defaultCenter={{
          lat: Number(latCurrentLocation) || 40.7128,
          lng: Number(lngCurrentLocation) || -74.006,
        }}
      >
        {markers}
        {userMarkers}
      </GoogleMap>
    ));

    const googleMap = (
      <MapWithAMarker
        containerElement={
          <div style={{ height: this.props.containerElement }} />
        }
        mapElement={<div style={{ height: this.props.mapElement }} />}
      />
    );

    return <div>{googleMap}</div>;
  }
}

Answer 1

您需要为每个信息窗口设置一个单独的 isOpen 状态，否则所有信息窗口都将打开（如果isOpen为真）。

选项 1：您可以制作一个组件<MarkerWithInfoWindow>，您可以在其中维护它自己的isOpen状态。这仍然允许通过一个接一个地单击来同时打开其中的多个。

选项 2：如果你想保持结构不变（所以你可以在另一个打开时关闭一个），你可以存储一个openInfoWindowMarkerId状态，像这样

this.state = {
        openInfoWindowMarkerId: ''
    }

然后你可以做类似的事情

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

你可以这样称呼它

<Marker
    key={i}
    position={{ lat: lat, lng: lng}}
    label={index.toString()}
    onClick={() => this.handleToggleOpen(i)} // marker ID is the key here. 
>