Opcje stylu pozwalają dostosować sposób wyświetlania standardowych stylów mapy Google, zmieniając sposób wyświetlania obiektów, takich jak drogi, parki, firmy i inne ciekawe miejsca. Oprócz zmiany stylu tych funkcji możesz też całkowicie je ukryć. Oznacza to, że możesz wyróżnić określone komponenty mapy lub dopasować ją do stylu otaczającej strony.
Przykłady
Poniższa deklaracja stylu JSON zmienia kolor wszystkich obiektów na mapie na szarą, kolor geometrii drogi art. na niebiesko i całkowicie ukrywa 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 JSON składa się z tych elementów:
- featureType (opcjonalnie) – funkcje do wyboru dla tej modyfikacji stylu. Obiekty to obiekty geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne i inne. Jeśli nie określisz cechy, zostaną wybrane wszystkie obiekty.
- elementType (opcjonalny) – właściwość określonej cechy do wyboru. Elementy to części obiektu, w tym etykiety i geometria. Jeśli nie określisz elementu, zostaną wybrane wszystkie jego elementy.
- stylers – reguły, które mają być stosowane do wybranych funkcji i elementów. Style pozwalają określić kolor, widoczność i wagę obiektu. Do funkcji 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. W pojedynczej tablicy możesz kierować reklamy na dowolną kombinację cech. Liczba stylów, które można zastosować jednocześnie, jest 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 stylach.
featureType
Ten fragment kodu JSON powoduje zaznaczenie wszystkich dróg na mapie:
{ "featureType": "road" }
Obiekty lub typy obiektów to obiekty geograficzne, takie jak drogi, parki, zbiorniki wodne czy firmy.
Cechy tworzą drzewo kategorii, którego poziomem głównym jest all
. Jeśli nie określisz obiektu, zostaną wybrane wszystkie obiekty.
Ten sam efekt uzyskasz, jeśli określisz funkcję all
.
Niektóre funkcje zawierają funkcje podrzędne określane za pomocą notacji punktowej. Na przykład: landscape.natural
lub road.local
. Jeśli określisz tylko funkcję nadrzędną, np. road
, style określone dla funkcji nadrzędnej zostaną zastosowane do wszystkich jej elementów podrzędnych, np. road.local
i road.highway
.
Pamiętaj, że funkcje nadrzędne mogą zawierać pewne elementy, które nie są dostępne we wszystkich funkcjach podrzędnych.
Dostępne są te funkcje:
all
(domyślnie) – wybiera wszystkie funkcje.administrative
zaznacza wszystkie obszary administracyjne. Styl ma wpływ tylko na etykiety obszarów administracyjnych, a nie na granice geograficzne ani wypełnienie.administrative.country
wybiera kraje.administrative.land_parcel
wybiera działki.administrative.locality
wybiera miejscowości.administrative.neighborhood
wybiera dzielnice.administrative.province
wybiera prowincje.
landscape
wybiera wszystkie poziomy.landscape.man_made
wybiera obiekty utworzone przez człowieka, takie jak budynki i inne obiekty.landscape.natural
wybiera obiekty naturalne, takie jak góry, rzeki, pustynie i lodowce.landscape.natural.landcover
wybiera elementy obejmujące powierzchnię ziemi, czyli materiały fizyczne pokryte powierzchnią Ziemi, takie jak lasy, łąki, mokradła i odgórne tereny.landscape.natural.terrain
wybiera elementy terenu, np. wysokość, nachylenie i orientację.
poi
zaznacza wszystkie ciekawe miejsca.poi.attraction
wybiera atrakcje turystyczne.poi.business
wybiera firmy.poi.government
wybiera budynki administracji publicznej.poi.medical
wybiera służby ratunkowe, w tym szpitale, apteki, policję, lekarzy i inne podmioty.poi.park
wybiera parki.poi.place_of_worship
wybiera miejsca kultu, w tym kościoły, świątynie, meczety i inne miejsca.poi.school
wybiera szkoły.poi.sports_complex
wybiera kompleksy sportowe.
road
zaznacza wszystkie drogi.road.arterial
wybiera drogi główne.road.highway
wybiera autostrady.road.highway.controlled_access
wybiera autostrady o kontrolowanym dostępie.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 powoduje wybranie etykiet wszystkich dróg lokalnych:
{ "featureType": "road.local", "elementType": "labels" }
Elementy to podgrupy cech. Na przykład droga składa się z linii graficznej (geometrii) na mapie oraz tekstu wskazującego jej nazwę (etykietę).
Dostępne są podane niżej elementy. Pamiętaj jednak, że konkretna funkcja może obsługiwać żaden z elementów, niektóre lub wszystkie:
all
(domyślnie) – wybiera wszystkie elementy określonej cechy.geometry
wybiera wszystkie elementy geometryczne określonego obiektu.geometry.fill
wybiera tylko wypełnienie geometrii obiektu.geometry.stroke
wybiera tylko obramowanie geometrii obiektu.
labels
wybiera etykiety tekstowe powiązane z określoną funkcją.labels.icon
wybiera tylko ikonę wyświetlaną w etykiecie obiektu.labels.text
zaznacza tylko tekst etykiety.labels.text.fill
wybiera tylko wypełnienie etykiety. Wypełnienie etykiety jest zwykle renderowane jako kolorowy kontur otaczający tekst etykiety.labels.text.stroke
wybiera tylko obramowanie tekstu etykiety.
stylers
Style to opcje formatowania, które możesz stosować do elementów i elementów mapy.
Ten fragment kodu JSON pozwala wyświetlić funkcję w kolorze jasnozielonym z użyciem wartości RGB:
"stylers": [ { "color": "#99FF33" } ]
Ten fragment kodu usuwa całą intensywność z koloru obiektu niezależnie od jego koloru początkowego. Efektem jest wyrenderowanie skali szarości:
"stylers": [ { "saturation": -100 } ]
Ten fragment całkowicie ukrywa daną 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ń z zachowaniem nasycenia i jasności określone w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem
hue
. W miarę możliwości zalecamy używanie stylizatora bezwzględnegocolor
.lightness
(wartość zmiennoprzecinkowa z przedziału od-100
do100
) wskazuje procentową zmianę jasności elementu. Wartości ujemne zwiększają ciemność (gdzie -100 oznacza czarny), a wartości dodatnie zwiększają jasność (gdzie +100 oznacza biały).Uwaga: ta opcja ustawia jasność, zachowując nasycenie i odcień określone w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem
lightness
. W miarę możliwości zalecamy używanie stylizatora bezwzględnegocolor
.saturation
(wartość zmiennoprzecinkowa z zakresu od-100
do100
) wskazuje procentową zmianę intensywności koloru podstawowego, która jest stosowana do elementu.Uwaga: ta opcja ustawia nasycenie, zachowując odcień i jasność określone w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Wynikowy kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem
saturation
. W miarę możliwości zalecamy używanie stylizatora bezwzględnegocolor
.gamma
(wartość zmiennoprzecinkowa między0.01
a10.0
, przy czym1.0
nie wprowadza korekty) wskazuje stopień korekty gamma zastosowanej do elementu. Korekcja gamma zmienia jasność kolorów w sposób nieliniowy, nie wpływając na wartości bieli ani czerni. Korekcja gamma jest zwykle używana do zmiany kontrastu wielu elementów. Możesz na przykład zmodyfikować wartość gamma, aby zwiększyć lub zmniejszyć kontrast między krawędziami a wnętrzami elementów.Uwaga: ta opcja dostosowuje jasność w odniesieniu do domyślnego stylu Google za pomocą krzywej gamma. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem
gamma
. W miarę możliwości najlepiej jest używać stylu bezwzględnegocolor
.invert_lightness
(jeślitrue
) odwraca jasność. Jest to przydatne, gdy na przykład 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 zmiany w stylu mapy podstawowej, wpłynie to na funkcje mapy ze stylem
invert_lightness
. W miarę możliwości zalecamy używanie stylizatora bezwzględnegocolor
.visibility
(on
,off
lubsimplified
) wskazuje, czy i w jaki sposób element wyświetla się na mapie. Widocznośćsimplified
powoduje usunięcie niektórych obiektów stylu z obiektów, których dotyczy problem. Na przykład drogi są upraszczane do postaci cieńszych linii bez kontur, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.color
(szesnastkowy kod RGB w formacie#RRGGBB
) ustawia kolor obiektu.weight
(wartość całkowita większa lub równa 0) ustawia wagę obiektu w pikselach. Ustawienie wagi na dużą wartość może spowodować przycinanie kafelków w pobliżu obramowań.
Reguły stylu są stosowane w określonej kolejności. Nie używaj wielu operacji w jednej operacji stylu. Zamiast tego każdą operację należy zdefiniować jako osobny wpis w tablicy stylów.
Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przemienne. Funkcje lub elementy modyfikowane za pomocą operacji stylów (zwykle) mają już istniejące style. Operacje będą działać na istniejących stylach, jeśli są dostępne.
Model barwy, nasycenia i jasności
Mapy ze stylem korzystają z modelu odcień, nasycenia i jasności (HSL) do określania koloru w operacjach stylizowania. Barwa wskazuje kolor podstawowy, nasycenie wskazuje intensywność danego koloru, a jasność wskazuje względną ilość bieli lub czerni w danym kolorze.
Korekta gamma modyfikuje jasność przestrzeni kolorów, zwykle w celu zwiększenia lub zmniejszenia kontrastu. Dodatkowo model HSL definiuje kolor w przestrzeni współrzędnych, gdzie hue
wskazuje orientację w koło kolorów, a nasycenie i jasność wskazują amplitudę wzdłuż różnych osi. Odcienie są mierzone w przestrzeni kolorów RGB, która jest podobna do większości przestrzeni kolorów RGB, z tą różnicą, że brakuje odcieni bieli i czerni.
hue
pobiera szesnastkową wartość koloru HTML, ale używa jej tylko do określenia koloru podstawowego, czyli jego orientacji wokół koła kolorów, a nie nasycenia czy jasności, które są podawane osobno jako zmiany procentowe.
Na przykład odcień zielonego koloru możesz zdefiniować za pomocą wartości hue:0x00ff00
lub hue:0x000100
. Oba kolory są identyczne. Obie wartości wskazują czystą zieleń w modelu kolorów HSL.
Koło kolorów RGB
Wartości hue
RGB, które składają się z równych częściach: czerwonego, zielonego i niebieskiego, nie wskazują barwy, ponieważ żadna z tych wartości nie wskazuje orientacji w przestrzeni HSL. Przykłady to „#000000” (czarny), „#FFFFFF” (biały) i wszystkie odcienie szarości. Aby wybrać czarny, biały lub szary, usuń wszystkie pola saturation
(ustaw wartość na -100
) i dostosuj właściwość lightness
.
Poza tym w przypadku modyfikowania istniejących funkcji, które mają już schemat kolorów, zmiana wartości takiej jak hue
nie spowoduje zmiany wartości saturation
ani lightness
.