设置 Mapbox 弹出窗口的样式 Pointer/Indicator

Question

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

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

这会产生这些漂亮的小盒子：

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

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

Answer 1

您需要更新的CSSclass是“.mapboxgl-popup-tip”。如果 CSS 文件中没有任何 class ，只需创建它并为“border-top-color:”属性指定颜色即可。

Answer 2

这是您需要的。不只是一个 class 因为尖端可以改变位置：

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

Answer 3

.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: #f15b28; }

我终于明白这是怎么回事了。

Answer 4

我弄明白了为什么应用 CSS 不会影响元素（在本例中为提示）。

我在 Chrome 中使用 Inspect Element 进行了一些调试。

原来我的CSS确实被应用了；然而，它被我在 index.html.

中应用的 MapBox 样式表覆盖

起初，我想也许如果我重新排序我的样式表，我可以在 MapBox 样式表之后调用我的样式表，那么我就没问题了。

这不是真的。

检查元素仍然显示我的 CSS 被覆盖。

解决方案是添加 !important:

    border-top-color: black !important;

这将覆盖 MapBox 之前完成的任何样式设置。

有关详细信息，请参阅：

What do the crossed style properties in Google Chrome devtools mean?
https://www.w3schools.com/css/css_important.asp

设置 Mapbox 弹出窗口的样式 Pointer/Indicator

Style a Mapbox Popup's Pointer/Indicator

css

styles

popup

mapbox

mapbox-gl-js