react-map-gl中如何实现点击单个Marker仅打开对应Popup的功能？

API 探路者

2026-10-7

解决方案

核心思路是将原本存储布尔值的弹窗状态，替换为存储当前被点击Marker对应的唯一标识，这样就能精准匹配要打开的弹窗。

具体修改步骤：

调整状态初始化，将popupOpen改为存储激活弹窗的ID，默认值设为null
Marker点击时，把当前对应地标的唯一ID写入状态
Popup的显示判断逻辑改为匹配状态存储的ID和当前地标ID
关闭弹窗时将状态重置为null

修改后完整代码：

// state
const [popupOpen, setPopupOpen] = useState(null);

// marker & popup
{landmarkData.map((data, index) => (
  <div key={data._id}>
    <Marker
      key={index}
      longitude={data.longitude}
      latitude={data.latitude}
      onClick={() => setPopupOpen(data._id)}
    >
      <RoomIcon fontSize="small" style={{fill: "red"}} />
    </Marker>
    {popupOpen === data._id && (
      <Popup
        key={index}
        latitude={data.latitude}
        longitude={data.longitude}
        onClose={() => setPopupOpen(null)}
        closeButton={true}
        offsetLeft={10}
      >
        <span style={{fontSize: "1vw", fontFamily: "Poppins"}}>
          {data.name}
        </span>
      </Popup>
    )}
  </div>
))}