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 funkcji możesz je całkowicie ukryć. Oznacza to, że możesz podkreślić poszczególne elementy mapy lub sprawić, że będzie ona pasować do stylu 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 (opcjonalnie) – funkcje do wybrania w przypadku tej modyfikacji stylu. Cechy to elementy geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne itp. Jeśli nie wybierzesz żadnej 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, zostaną wybrane wszystkie elementy funkcji.
- stylers – reguły stosowane do wybranych funkcji i elementów. Stylery wskazują kolor, widoczność i wagę funkcji. Do funkcji możesz zastosować co najmniej 1 stylizator.
Aby określić styl, musisz połączyć zestaw selektorów featureType
i elementType
oraz stylers
w tablicę stylów. W jednym tablicy możesz kierować reklamy na dowolną kombinację funkcji. Liczba stylów, które możesz zastosować jednocześnie, jest jednak ograniczona. Jeśli tablica style przekracza maksymalną liczbę znaków, styl nie zostanie zastosowany.
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 funkcji, zostaną wybrane wszystkie funkcje.
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órych nie ma w niektórych z ich funkcji podrzędnych.
Dostępne są te funkcje:
all
(domyślnie) wybiera wszystkie funkcje.administrative
wybiera wszystkie obszary administracyjne. Stylizacja ma wpływ tylko na etykiety obszarów administracyjnych, a nie na ich granice ani wypełnienie.administrative.country
wybiera kraje.administrative.land_parcel
wybiera działki.administrative.locality
wybiera lokalizacje.administrative.neighborhood
wybiera dzielnice.administrative.province
wybiera prowincje.
landscape
wybiera wszystkie pejzaże.landscape.man_made
wybiera elementy stworzone przez człowieka, takie jak budynki i inne konstrukcje.landscape.natural
wybiera elementy przyrodnicze, takie jak góry, rzeki, pustynie i lodowce.landscape.natural.landcover
wybiera cechy pokrycia terenu, czyli fizyczne materiały, które pokrywają powierzchnię Ziemi, takie jak lasy, łąki, mokradła i goła ziemia.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 przesiadkowe.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 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ą te elementy, ale pamiętaj, że dana funkcja może obsługiwać wszystkie, niektóre lub żadne z nich:
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
wybiera 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
(szesnastkowy kod 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 bazowej. 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ć stylizatoracolor
.lightness
(wartość zmiennoprzecinkowa z zakresu od-100
do100
) 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ść, zachowując nasycenie i odcień określone w domyślnym stylu Google (lub w innych opcjach stylu zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy bazowej. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą
lightness
. Jeśli to możliwe, lepiej użyć stylizatoracolor
.saturation
(wartość zmiennoprzecinkowa z zakresu-100
i100
) wskazuje procentową zmianę intensywności podstawowego koloru, który ma zostać zastosowany do elementu.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 bazowej. Jeśli Google wprowadzi jakiekolwiek zmiany w podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą
saturation
. Jeśli to możliwe, lepiej użyć stylizatoracolor
.gamma
(wartość zmiennoprzecinkowa z zakresu0.01
–10.0
, gdzie1.0
oznacza brak korekty) wskazuje wielkość korekty gamma, która ma zostać 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ść w stosunku do domyślnego stylu Google, używając krzywej gamma. Jeśli Google wprowadzi jakiekolwiek zmiany w stylu mapy podstawowej, zmiany te wpłyną na elementy mapy stylizowane za pomocą funkcji
gamma
. Jeśli to możliwe, lepiej użyć stylizatoracolor
.invert_lightness
(jeślitrue
) odwraca 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 podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą
invert_lightness
. Jeśli to możliwe, lepiej użyć stylizatoracolor
.visibility
(on
,off
lubsimplified
) wskazuje, czy element ma się wyświetlać na mapie i w jaki sposób. Visibilitysimplified
usuwa niektóre elementy stylu z objętych nią obiektów. Na przykład drogi są uproszczone do cienkich linii bez obrysów, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.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 elementów w pobliżu krawędzi kafelka.
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ą przemienniki. 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 są obecne).
Model odcień, nasycenie, jasność
Mapy stylizowane używają modelu tonu, nasycenia i jasności (HSL) do oznaczania kolorów w operacjach stylizowania. Barwa wskazuje kolor podstawowy, nasycenie wskazuje intensywność tego koloru, a jasność wskazuje względną ilość bieli lub czerni w kolorze składowym.
Korekta krzywej gamma zmienia jasność w przestrzeni barw, aby zwiększyć lub zmniejszyć kontrast. 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.
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 podczas modyfikowania istniejących funkcji, które mają już schemat kolorów, zmiana wartości takiej jak hue
nie powoduje zmiany wartości saturation
ani lightness
.