Jak zmienić kolor klastrów znaczników / wyświetlić ikonę poniżej klastrów

Kolory klastrów znaczników można zmieniać tylko za pomocą CSS. Dodaj następujące style CSS na końcu stylu style.css i odpowiednio dostosuj kolory.

Narzędzie do uzyskiwania wartości kolorów w rgba można znaleźć na stronie https://www.hexcolortool.com/ - pamiętaj, że ostatnia liczba to wartość przezroczystości, od 0 do 1:

.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6) !important;
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6) !important;
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6) !important;
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6) !important;
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6) !important;
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6) !important;
}

Alternatywnie możesz również użyć kodów kolorów szesnastkowych, takich jak # C0C0C0.

Jeśli z drugiej strony chcesz dodać niestandardową ikonę poniżej klastra, zapoznaj się z poniższym przykładem jako odniesieniem (użyj własnych adresów URL do ikon):

.marker-cluster-small::after {
content: " ";
background: url('https://www.mapsmarker.com/wp-content/uploads/maps-marker-pro/icons/hospital-building.png');
height: 36px;
width: 36px;
background-repeat: no-repeat;
display: inline-block;
}

Przykładowe dane wyjściowe:

1
0
12763
Oceń ten podręcznik użytkownika

2 odpowiedzi do „Jak zmienić kolor klastrów znaczników / wyświetlić ikonę poniżej klastrów”

    Cześć,
    zmieniam kolory znacznika klastra. Ale teraz nie mogę odczytać liczby w znaczniku.
    Jak zmienić kolor liczby w znaczniku klastra?

    pozdrowienia
    Wolfram

      Cześć Wolfram,

      aby zmienić liczbę w klastrze znaczników, dodaj właściwość CSS koloru do pożądanego stylu klastra, np

      .marker -uster-medium div {
      kolor tła: rgba (240, 194, 12, 0.6)! ważne;
      kolor: #000;
      }

      najlepiej,

      Robert

Zostaw komentarz

XHTML: Możesz użyć tych tagów: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

en English
X