React-Map-GL：如何使悬停标记出现在顶部？

Question

我有一张带有不同标记的地图，据我所知，标记是按照它们出现的顺序呈现的，这意味着标记 3 在标记 1 和 2 之上。我正在将 React Map Gl 与 mapblibre-gl 和 React(typescript) 一起使用我对此很好，但是如果我将鼠标悬停在一个标记上，我希望悬停的标记位于顶部（当与另一个标记重叠时）。我尝试了 z-index 但它根本不起作用。

制造商：

<Marker latitude={station.lat} longitude={station.lng} key={station.id} >
                        <div className='locDot'>
                            <div className='priceTag'>
                                <span id="brand">{station.brand ? station.brand : 'freie Tankstelle'}</span>
                                <span id="price">{price}</span>
                            </div>
                        </div>
</Marker >

然后将此标记推入数组并作为许多标记的组成部分返回。

CSS:

.locDot{
    /* position: absolute; */
    height: 12px;
    width: 12px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-color: #1E90FF;
    border: 2px solid #fff;
    border-radius: 100%; 
    /* z-index: 1; */
    
  
    
}

.priceTag{
    /* position: relative; */
    display: flex;
    flex-direction: column;
    background-color: #1E90FF;
    padding: 4px 6px;
    font-size: 1rem;
    font-weight: 400;
    color: white;
    margin-bottom: 18px;
    border-radius: 5px;
    /* line-height: 1rem; */
    z-index: 1;

   
    
}
.priceTag:hover{
    position: absolute;
    border: 5px solid red;
    z-index: 5;
}

桑多克斯：codesandbox.io/s/vigorous-mahavira-gxk6wj?file=/src/App.tsx

Answer 1

您需要将 zIndex 应用于标记本身，您可以通过添加 className 或内联样式来实现。

我已经用解决方案更新了 codesandbox，基本上我们将映射简单数组和 return 标记，基于标记索引我们将设置活动状态，然后检查标记内联样式中的当前 activeIndex 是什么。如果将鼠标悬停在 div 上，将 activeIndex 设置为其索引..

但正如我所说，这可以简单地通过被动 active className 然后给它 z-index: 1

来实现

这是codesandbox

React-Map-GL：如何使悬停标记出现在顶部？

React-Map-GL: How to make hovered marker appear on top?

javascript

css

reactjs

react-map-gl

maplibre-gl