Jak změnit barvu značek clusterů / zobrazit ikonu pod clustery

Barvy klastrů značek lze měnit pouze pomocí CSS. Přidejte následující styly CSS na konec stylu vašeho motivu.css a podle toho upravte barvy.

Nástroj pro získání hodnot barev v rgba lze nalézt na https://www.hexcolortool.com/ - mějte na paměti, že poslední číslo je hodnota průhlednosti od 0 do 1:


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

Jako alternativu můžete také použít hexadecimální barevné kódy jako # C0C0C0.

Pokud na druhou stranu chcete přidat vlastní ikonu pod cluster, viz následující příklad jako odkaz (použijte prosím vlastní URL k ikonám):


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

Příklad výstupu:

1
0
12888
Ohodnoťte tuto uživatelskou příručku

2 Reakce na „Jak změnit barvu značek clusterů / zobrazit ikonu pod clustery“

    Ahoj,
    i změnit barvy značky clusteru. Ale teď nemůžu přečíst číslo ve značce.
    Jak změnit barvu čísla ve značce clusteru?

    Pozdravy
    wolfram

      Ahoj Wolfram,

      Chcete-li změnit číslo v klastru markerů, přidejte barvu CSS do požadovaného stylu klastru, např

      .marker-cluster-medium div {
      Barva: #000;
      barva pozadí: rgba (240, 194, 12, 0.6);
      }

      nejlepší,

      Robert

Zanechat odpověď Robert Harm

Klikněte zde pro zrušení odpovědi.

XHTML: Můžete použít tyto značky: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

en English
X