为 Mapbox 弹出窗口的指针/指示器设置样式答案

【问题标题】：Style a Mapbox Popup's Pointer/Indicator为 Mapbox 弹出窗口的指针/指示器设置样式
【发布时间】：2017-11-17 04:35:37
【问题描述】：

我正在使用 Mapbox 的 GL JS 为通过 Mapbox 显示的地图设计一些弹出窗口。但是，我在他们的文档中找不到关于自动分配给弹出窗口的类。到目前为止，我的 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 类来解决这个问题。包括但不限于 .mapboxgl-popup、.mapboxgl-popup-anchor、.mapboxgl-popup-pointer 等。我不确定从哪里获取文档我需要知道我应该使用什么 CSS 类来更改这个讨厌的三角形的颜色。

【问题讨论】：

是否有链接可以查看？不是特别熟悉 Mapbox GL 的人可能仍然可以帮助您解决问题。

标签： css popup styles mapbox mapbox-gl-js

【解决方案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;
    }

【讨论】：

【解决方案2】：

您需要更新的 CSS 类是“.mapboxgl-popup-tip”。如果您的 CSS 文件中没有类似的类，只需创建它并为“border-top-color:”属性赋予您想要的颜色。

【讨论】：

这仅影响位于内容底部的提示

【解决方案3】：

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

我终于明白了这是如何工作的。

【讨论】：