React Google Maps实现InfoWindow单次仅显示一个的问题

我太懂你现在的困扰了——每个Marker的InfoWindow各管各的状态，点开新窗口旧的还挂在那儿，完全没法自动关闭。核心问题其实很明确：你现在的每个MarkerInfoList组件都自己攥着isOpen状态，组件之间完全没共享状态，自然不知道该互相“通知”关闭窗口。

咱们换个思路，用状态提升就能搞定：把控制窗口开关的状态移到父组件，让父组件统一管着当前哪个Marker是激活状态，这样就能保证同一时间只有一个InfoWindow亮着。

具体怎么改？ #

1. 让父组件统一掌控状态

在包裹所有MarkerInfoList的父组件里，加一个activeMarkerId状态，专门存当前打开窗口的Marker ID（初始设为null，代表没窗口打开）。再写两个方法：一个用来激活指定Marker，另一个用来关闭所有窗口。

举个父组件的例子：

class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeMarkerId: null // 记录当前激活的Marker ID
    };
  }

  // 激活指定Marker，打开它的InfoWindow
  handleMarkerActivate = (markerId) => {
    this.setState({ activeMarkerId: markerId });
  };

  // 关闭所有InfoWindow
  handleMarkerDeactivate = () => {
    this.setState({ activeMarkerId: null });
  };

  render() {
    const venues = this.props.venues; // 假设你的地点数据存在这里
    return (
      <GoogleMap defaultZoom={12} defaultCenter={{ lat: 40.7128, lng: -74.0060 }}>
        {venues.map((venue, index) => (
          <MarkerInfoList
            key={index}
            index={index}
            venue={venue.name}
            lat={venue.lat}
            lng={venue.lng}
            activeMarkerId={this.state.activeMarkerId}
            onMarkerActivate={this.handleMarkerActivate}
            onMarkerDeactivate={this.handleMarkerDeactivate}
          />
        ))}
      </GoogleMap>
    );
  }
}

2. 改造子组件MarkerInfoList

子组件别自己存isOpen了，直接用父组件传过来的activeMarkerId和自己的ID对比，判断要不要显示Marker和InfoWindow。点击事件也改成调用父组件的回调方法，让父组件统一处理状态。

修改后的子组件代码：

class MarkerInfoList extends Component {
  render() {
    const { index, venue, lat, lng, activeMarkerId, onMarkerActivate, onMarkerDeactivate } = this.props;
    // 判断当前Marker是否激活：ID匹配就是激活状态
    const isActive = activeMarkerId === index;

    return (
      <div>
        {/* 列表项点击：通知父组件激活当前Marker */}
        <ul>
          <li onClick={() => onMarkerActivate(index)}>{venue}</li>
        </ul>

        {/* 只有激活状态下才渲染Marker和InfoWindow */}
        {isActive && (
          <Marker
            id={index}
            position={{ lat, lng }}
            defaultAnimation={google.maps.Animation.DROP}
            onClick={() => onMarkerActivate(index)}
          >
            <InfoWindow onCloseClick={onMarkerDeactivate}>
              <div>
                <h4>{venue}</h4>
              </div>
            </InfoWindow>
          </Marker>
        )}
      </div>
    );
  }
}

export default MarkerInfoList;

为啥这样就能解决问题？ #

• 父组件的activeMarkerId是唯一的，每次点新Marker，这个值就会更新成新ID，之前激活的Marker因为ID不匹配，对应的InfoWindow会自动消失。
• 点InfoWindow的关闭按钮时，父组件把activeMarkerId设为null，所有窗口都会乖乖关闭。
• 列表项的点击逻辑也统一到父组件，确保Marker和InfoWindow的状态完全同步。

这样改完，就能实现“点新Marker自动关旧窗口，只留当前窗口”的需求啦～

内容的提问来源于stack exchange，提问作者teresa