React-Map-GL：如何在鼠标悬停时将地图标记置于最上层？

你遇到的核心问题确实是每个<Marker>组件都会创建独立的堆叠上下文，所以你在子元素.pointer的:hover伪类里设置z-index只会在该Marker的局部上下文中生效，无法突破到全局层级。下面提供两种解决方案，优先满足你要的CSS方案：

方案一：CSS优先（使用:has()伪类） #

现代浏览器已经广泛支持:has()伪类，它可以让我们根据子元素的状态来控制父元素的样式。具体步骤：

1. 给每个<Marker>组件添加一个统一的类名，比如marker-container：

<Marker 
  latitude={marker.position[0]} 
  longitude={marker.position[1]} 
  key={i}
  className="marker-container"
>
  <Pointer viewPort={viewPort} marker={marker} markerCategory={markerCategory} setViewport={setViewport}/>
</Marker>

2. 修改你的CSS，通过:has()选中包含hover状态.pointer的Marker容器，给它设置更高的z-index：

.pointer {
  /* 保留你原来的样式 */
  transform-origin: bottom center;
  width: 40px;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom:0;
  transform: translateX(-50%);
  &:hover {
    animation-name: bounce;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    /* 这里的z-index可以保留，用于Marker内部的层级控制 */
    z-index: 1;
    + .text {
      animation-name: bounce-text;
      animation-duration: .4s;
      animation-fill-mode: forwards;
      animation-delay: .2s;
    }
  }
}

/* 新增：控制Marker容器的全局层级 */
.marker-container {
  z-index: auto;
}
.marker-container:has(.pointer:hover) {
  z-index: 1000;
}

这样当你hover某个.pointer时，它的父容器marker-container会被赋予更高的z-index，而所有Marker容器都是同级元素，自然就能把整个Marker（包括图标和文本）带到最上层。

方案二：JavaScript控制（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器，可以通过状态来动态控制Marker的z-index：

1. 添加一个状态来记录当前hover的Marker的唯一标识：

import { useState } from 'react';

// 在组件内部定义状态
const [hoveredMarkerKey, setHoveredMarkerKey] = useState(null);

2. 修改Marker的渲染逻辑，动态设置style里的z-index，同时给<Pointer>添加鼠标事件：

<ReactMapGl 
  ref={mapEl} 
  {...viewPort} 
  onViewportChange={(_viewport) => setViewport(_viewport)} 
  mapboxApiAccessToken={mapboxToken} 
  mapStyle="mapbox://styles/mapbox/satellite-v9" 
  style={{position:'relative', zIndex: '1'}} 
>
  {mapData.markerCategories.map((markerCategory, catIndex) => (
    <React.Fragment key={catIndex}>
      {markerCategory.markers.map((marker, markerIndex) => {
        // 生成唯一key，避免不同分类下的索引重复
        const markerKey = `${catIndex}-${markerIndex}`;
        return (
          <Marker 
            latitude={marker.position[0]} 
            longitude={marker.position[1]} 
            key={markerKey}
            style={{ zIndex: hoveredMarkerKey === markerKey ? 1000 : 'auto' }}
          >
            <Pointer 
              viewPort={viewPort} 
              marker={marker} 
              markerCategory={markerCategory} 
              setViewport={setViewport}
              onMouseEnter={() => setHoveredMarkerKey(markerKey)}
              onMouseLeave={() => setHoveredMarkerKey(null)}
            />
          </Marker>
        )
      })}
    </React.Fragment> 
  ))}
</ReactMapGl>

这个方案通过鼠标事件触发状态更新，动态给hover的Marker设置最高层级，兼容性更好，适合需要支持旧版浏览器的场景。

为什么原来的z-index不生效？ #

再补充一下原因：react-map-gl的<Marker>组件会渲染一个绝对定位的容器div，每个Marker的这个容器都是同级元素，各自形成独立的堆叠上下文。你在.pointer里设置的z-index只能在该Marker的容器内部生效，无法影响其他Marker容器的堆叠顺序。所以必须直接控制Marker容器本身的z-index才能让整个Marker上浮到最上层。

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