Стиль указателя / индикатора всплывающего окна Mapbox

Я создаю несколько всплывающих окон для карты, отображаемой через 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 я должен использовать для изменения цвет этого надоедливого треугольника.


css mapbox mapbox-gl-js popup styles
person Samantha Bamberger    schedule 14.06.2017    source источник
comment
Можно ли посмотреть на это ссылку? Кто-то, кто не особенно знаком с Mapbox GL, может все же помочь вам разобраться, если это так.   -  person cjl750    schedule 15.06.2017

Ответы (2)


arrow_upward
13
arrow_downward

Вот что тебе нужно. Это не просто один класс, потому что наконечник может менять положение:

.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;
    }
person iH8    schedule 14.06.2017

arrow_upward
4
arrow_downward

Класс CSS, который вам нужно обновить, - «.mapboxgl-popup-tip». Если в вашем файле CSS нет такого класса, просто создайте его и задайте цвет, который вы хотите атрибуту «border-top-color:».

person George Diril    schedule 14.06.2017
comment
Это влияет только на подсказку, когда она находится внизу содержимого. - person Mark Jackson; 01.08.2020