css - 设置 Mapbox 弹出窗口的指针/指示器的样式

Question

我正在使用 Mapbox 的 GL JS 为通过 Mapbox 显示的 map 设置一些弹出窗口的样式。但是，我在他们的文档中找不到有关自动分配给弹出窗口的类的信息。到目前为止，我的 CSS 看起来像这样:

.mapboxgl-Popup-content {
    color: #F3F3DD;
    background-color: #91785D;
    border-color: #91785D;
    max-width: 250px;
    box-shadow: 3px 3px 2px #8B5D33;
    font-family: 'Oswald';
}

这产生了这些漂亮的小盒子:



我的问题是底部指向标记的白色三 Angular 形。我想改变它的颜色。

我已经尝试了许多 CSS 类来解决这个问题。包括但不限于 .mapboxgl-popup、.mapboxgl-popup-anchor、.mapboxgl-popup-pointer 等。 我不知道从哪里获取文档 我需要知道我应该使用什么 CSS 类来更改这个讨厌的三 Angular 形的颜色。

Answer 1

这是你需要的。这不仅仅是一类，因为尖端可以改变位置:

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
    border-bottom-color: #fff;
    }
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-top-color: #fff;
    }
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #fff;
    }
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #fff;
    }