React Map GL:如何使悬停标记出现在顶部

Question

我有一个带有不同标记的地图，据我所知，标记是按出现的顺序呈现的，这意味着标记3位于标记1和2的顶部。我正在使用React Map Gl与mapblibre Gl和React(typescript(我对此很满意，但如果我悬停一个标记，我希望悬停的标记位于顶部(与另一个标记重叠时(。我尝试了z索引，但它根本不起作用。

制造商：

<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;
}

Sandox:codesandbox.io/s/vigorous-mahavira-gxk6wj？file=/src/App.tsx

Answer 1

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

我已经用解决方案更新了代码沙盒，基本上我们会映射简单的数组并返回Markers，基于Marker索引，我们会设置活动状态，然后检查Marker内联样式中的当前活动索引。如果您将鼠标悬停在该div上，请将activeIndex设置为其索引。。

但正如我所说，这可以简单地通过被动activeclassName然后赋予它z-index: 1来实现

这是代码沙盒

Answer 2

解决方案可以将其添加到styles.css中。

.maplibregl-marker:hover {
z-index: 1000;
}

这是可复制的代码。