Odniesienie do stylu dla statycznego interfejsu API Map Google

Opcje stylów umożliwiają dostosowywanie standardowych stylów map Google, zmienianie wizualnego wyświetlania elementów takich jak drogi, parki, firmy i inne punkty zainteresowania. Oprócz zmiany stylu tych cech możesz całkowicie ukryć funkcje. Oznacza to, że możesz wyróżnić określone komponenty mapy lub dostosować mapę do stylu sąsiadującej z nią strony.

Przykłady

Poniższa deklaracja stylu JSON powoduje, że wszystkie elementy mapy stają się szare, a geometria dróg głównych nabiera koloru niebieskiego. Pozwala też całkowicie ukryć etykiety krajobrazu:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Obiekt JSON

Deklaracja stylu w formacie JSON składa się z tych elementów:

  • featureType (opcjonalny) – cechy, które mają zostać wybrane w przypadku tej modyfikacji stylu. Cechy to elementy geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne itp. Jeśli nie wybierzesz funkcji, zostaną wybrane wszystkie.
  • elementType (opcjonalnie) – właściwość wybranej funkcji. Elementy to podelementy funkcji, w tym etykiety i geometria. Jeśli nie określisz elementu, wybrane zostaną wszystkie jego elementy.
  • stylers – reguły stosowane do wybranych funkcji i elementów. Style określają kolor, widoczność i wagę obiektu. Do elementu możesz zastosować jeden lub więcej stylów.

Aby określić styl, musisz połączyć zestaw selektorów featureType i elementType oraz stylers w tablicę stylów. Możesz kierować reklamy na dowolną kombinację funkcji w jednym tablicy. Liczba stylów, które możesz zastosować jednocześnie, jest jednak ograniczona. Jeśli tablica stylów przekracza maksymalną liczbę znaków, styl nie jest stosowany.

W dalszej części tej strony znajdziesz więcej informacji o funkcjach, elementach i stylizowaniu.

featureType

Ten fragment kodu JSON wybiera wszystkie drogi na mapie:

{
  "featureType": "road"
}

Cechy lub ich typy to elementy geograficzne na mapie, m.in. drogi, parki, zbiorniki wodne, firmy.

Funkcje tworzą drzewo kategorii, którego korzeń to all. Jeśli nie określisz obiektu, wybrane zostaną wszystkie obiekty. Podanie funkcji all ma ten sam efekt.

Niektóre funkcje zawierają funkcje podrzędne, które określasz za pomocą notacji kropkowej. Na przykład landscape.natural lub road.local. Jeśli określisz tylko funkcję nadrzędną, np. road, style określone dla tego elementu nadrzędnego zostaną zastosowane do wszystkich jego elementów podrzędnych, np. road.local i road.highway.

Pamiętaj, że funkcje nadrzędne mogą zawierać elementy, które nie są uwzględnione we wszystkich ich funkcjach podrzędnych.

Dostępne są te funkcje:

  • all (domyślnie) wybiera wszystkie funkcje.
  • administrative wybiera wszystkie obszary administracyjne. Styl wpływa tylko na etykiety obszarów administracyjnych, a nie na granice geograficzne ani wypełnienie.
    • administrative.country wybiera kraje.
    • administrative.land_parcelwybiera działki.
    • administrative.locality wybiera lokalizacje.
    • administrative.neighborhood wybiera dzielnice.
    • administrative.province wybiera prowincje.
  • landscape wybiera wszystkie krajobrazy.
    • landscape.man_made wybiera elementy stworzone przez człowieka, takie jak budynki i inne konstrukcje.
    • landscape.natural wybiera obiekty naturalne, takie jak góry, rzeki, pustynie i lodowce.
    • landscape.natural.landcover wybiera elementy pokrywy terenu, czyli fizyczny materiał pokrywający powierzchnię Ziemi, np. lasy, łąki, mokradła i pusty teren.
    • landscape.natural.terrain wybiera cechy terenu powierzchni lądowej, takie jak wysokość, nachylenie i orientacja.
  • poi wybiera wszystkie ważne miejsca.
    • poi.attraction wybiera atrakcje turystyczne.
    • poi.business wybiera firmy.
    • poi.government wybiera budynki rządowe.
    • poi.medical wybiera usługi ratunkowe, w tym szpitale, apteki, policję, lekarzy i inne.
    • poi.park wybiera parki.
    • poi.place_of_worship wybiera miejsca kultu, w tym kościoły, świątynie, meczety i inne.
    • poi.school wybiera szkoły.
    • poi.sports_complex wybiera kompleksy sportowe.
  • road wybiera wszystkie drogi.
    • road.arterial wybiera drogi główne.
    • road.highway wybiera autostrady.
    • road.highway.controlled_access wybiera autostrady z dostępem kontrolowanym.
    • road.local wybiera drogi lokalne.
  • transit wybiera wszystkie stacje i linie transportu publicznego.
    • transit.line wybiera linie transportu publicznego.
    • transit.station wybiera wszystkie stacje transportu publicznego.
    • transit.station.airport wybiera lotniska.
    • transit.station.bus wybiera przystanki autobusowe.
    • transit.station.rail wybiera stacje kolejowe.
  • water wybiera zbiorniki wodne.

elementType

Ten fragment kodu JSON wybiera etykiety dla wszystkich dróg lokalnych:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Elementy to podziały funkcji. Na przykład droga składa się z linii graficznej (geometria) na mapie oraz tekstu oznaczającego jej nazwę (etykieta).

Dostępne są wymienione niżej elementy, ale pamiętaj, że dana funkcja może nie obsługiwać żadnych, niektórych lub wszystkich elementów:

  • all (domyślnie) wybiera wszystkie elementy określonej cechy.
  • geometry wybiera wszystkie elementy geometryczne określonej cechy.
    • geometry.fill wybiera tylko wypełnienie geometrii funkcji.
    • geometry.stroke wybiera tylko obrys geometrii funkcji.
  • labels wybiera etykiety tekstowe powiązane z wybraną funkcją.
    • labels.icon wybiera tylko ikonę wyświetlaną na etykiecie funkcji.
    • labels.text zaznaczy tylko tekst etykiety.
    • labels.text.fill wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowe obramowanie otaczające tekst.
    • labels.text.stroke zaznacza tylko obrys tekstu etykiety.

stylers

Stylery to opcje formatowania, które możesz stosować do elementów mapy.

Ten fragment kodu JSON wyświetla cechę jako jasnozieloną, używając wartości RGB:

"stylers": [
  { "color": "#99FF33" }
]

Ten fragment kodu usuwa całą intensywność koloru funkcji niezależnie od jej koloru początkowego. Efekt to renderowanie funkcji w szarościach:

"stylers": [
  { "saturation": -100 }
]

Ten fragment kodu całkowicie ukrywa funkcję:

    "stylers": [
      { "visibility": "off" }
    ]

Obsługiwane są te opcje stylu:

  • hue (ciąg szesnastkowy RGB w formacie #RRGGBB) wskazuje kolor podstawowy.

    Uwaga: ta opcja ustawia odcień, zachowując nasycenie i jasność określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą hue. Jeśli to możliwe, lepiej użyć stylizatora color.

  • lightness (wartość zmiennoprzecinkowa z zakresu od -100 do 100) wskazuje procentową zmianę jasności elementu. Wartości ujemne zwiększają ciemność (wartość -100 oznacza czerń), a wartości dodatnie zwiększają jasność (wartość +100 oznacza biel).

    Uwaga: ta opcja ustawia jasność przy zachowaniu nasycenia i odcienia określonych w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Otrzymany kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą lightness. Lepiej jest użyć stylu bezwzględnego color, jeśli to możliwe.

  • saturation (wartość zmiennoprzecinkowa z zakresu -100 do 100) wskazuje procentową zmianę intensywności podstawowego koloru, który ma być zastosowany w elemencie.

    Uwaga: ta opcja ustawia nasycenie, zachowując odcień i jasność określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą saturation. Lepiej jest użyć stylu bezwzględnego color, jeśli to możliwe.

  • gamma (wartość zmiennoprzecinkowa między 0.01 a 10.0, gdzie 1.0 nie stosuje korekcji) wskazuje zakres korekty gamma, która zostanie zastosowana do elementu. Korekty gamma zmieniają jasność kolorów w sposób nieliniowy, nie wpływając na wartości białego ani czarnego. Korekta gamma jest zwykle używana do modyfikowania kontrastu wielu elementów. Możesz na przykład zmodyfikować wartość gamma, aby zwiększyć lub zmniejszyć kontrast między krawędziami a wnętrzem elementów.

    Uwaga: ta opcja dostosowuje jasność do domyślnego stylu Google za pomocą krzywej gamma. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te wpłyną na elementy mapy stylizowane za pomocą funkcji gamma. Lepiej jest użyć stylu bezwzględnego color, jeśli to możliwe.

  • invert_lightness (jeśli true) odwraca obecną jasność. Jest to przydatne, gdy chcesz szybko przełączyć się na ciemniejszą mapę z białym tekstem.

    Uwaga: ta opcja po prostu odwraca domyślny styl Google. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, wpłyną one na obiekty mapy z atrybutem invert_lightness. Jeśli to możliwe, lepiej użyć stylizatora color.

  • visibility (on, off lub simplified) wskazuje, czy i w jaki sposób element wyświetla się na mapie. Widoczność simplified powoduje usunięcie niektórych cech stylu z objętych zmianą elementów. Na przykład drogi są upraszczane w cieńsze linie bez konturów, natomiast parki tracą tekst etykiety, ale zachowują jej ikonę.
  • color (szesnastkowy kod RGB w formacie #RRGGBB) ustawia kolor funkcji.
  • weight (wartość całkowita większa lub równa 0) określa wagę funkcji w pikselach. Ustawienie wysokiej wartości wagi może spowodować przycięcie obszaru w pobliżu obramowania kafelków.

Reguły stylu są stosowane w określonej przez Ciebie kolejności. Nie łącz wielu operacji w jedną operację stylu. Zamiast tego zdefiniuj każdą operację jako osobny wpis w tablicy style.

Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przechodnie. Funkcje lub elementy, które są modyfikowane przez operacje stylów, (zwykle) mają już style. Operacje działają na te istniejące style (jeśli istnieją).

Model odcień, nasycenie, jasność

Mapy stylizowane używają modelu tonu, nasycenia i jasności (HSL) do oznaczania kolorów w operacjach stylizatora. Odcień wskazuje kolor podstawowy, nasycenie wskazuje intensywność tego koloru, a jasność wskazuje względną ilość bieli lub czerni w kolorze składowym.

Korekcja gamma modyfikuje jasność w przestrzeni kolorów, zazwyczaj w celu zwiększenia lub zmniejszenia kontrastu. Model HSL definiuje kolor w przestrzeni współrzędnych, w której hue wskazuje orientację na kole barw, a nasycenie i jasność wskazują amplitudy wzdłuż różnych osi. Barwy są mierzone w przestrzeni kolorów RGB, która jest podobna do większości przestrzeni kolorów RGB, z tą różnicą, że nie zawiera odcieni bieli i czerni.

Model odcień, nasycenie, jasność

Funkcja hue przyjmuje szesnastkowy kod koloru HTML, ale używa go tylko do określenia koloru podstawowego, czyli jego orientacji na kole kolorów, a nie nasycenia ani jasności, które są wskazywane oddzielnie jako zmiany procentowe.

Możesz na przykład zdefiniować barwę czystej zieleni jako hue:0x00ff00 lub hue:0x000100. Oba odcienie są identyczne. Obie wartości wskazują na czysty kolor zielony w modelu kolorów HSL.

Koło kolorów RGB

Wartości RGB hue, które składają się z równych części czerwonego, zielonego i niebieskiego, nie wskazują odcienia, ponieważ żadna z tych wartości nie wskazuje orientacji w przestrzeni współrzędnych HSL. Przykłady to „#000000” (czarny), „#FFFFFF” (biały) oraz wszystkie czyste odcienie szarości. Aby wskazać kolor czarny, biały lub szary, musisz: usunąć wszystkie wartości saturation (ustawić wartość na -100) i zamiast tego dostosować wartość lightness.

Dodatkowo, gdy modyfikujesz istniejące funkcje, które mają już schemat kolorów, zmiana wartości, takiej jak hue, nie powoduje zmiany wartości saturation lub lightness.