Za pomocą opcji stylu możesz dostosować sposób wyświetlania standardowych stylów mapy Google, zmieniając w ten sposób sposób wyświetlania obiektów, takich jak drogi, parki, firmy i inne ciekawe miejsca. Możesz nie tylko zmienić styl tych obiektów, ale także całkowicie je ukryć. Oznacza to, że możesz uwydatnić określone elementy mapy lub dostosować ją do stylu otaczającej strony.
Przykłady
Poniższa deklaracja stylu JSON zmienia kolor wszystkich obiektów mapy na szarą, a następnie kolory geometryczne drogi arteryjnej 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, które mają być wybrane dla tej modyfikacji stylu. Obiekty to dane geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne i inne. Jeśli nie określisz obiektu, zostaną wybrane wszystkie obiekty.
- elementType (opcjonalny) – właściwość określonej cechy do wyboru. Elementy to części obiektu, m.in. etykiety i geometria. Jeśli nie określisz elementu, zostaną wybrane wszystkie jego elementy.
- stylers – reguły stosowane do wybranych obiektów i elementów. Style wskazują kolor, widoczność i wagę obiektu. Do funkcji możesz zastosować jeden lub więcej stylizatoró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 ustawić kierowanie 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, nie zostanie zastosowany żaden styl.
Pozostała część tej strony zawiera 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 dane geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne, firmy itp.
Cechy tworzą drzewo kategorii, gdzie 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, które określasz za pomocą kropki. Na przykład landscape.natural
lub road.local
. Jeśli określisz tylko funkcję nadrzędną, na przykład road
, style, które określisz dla elementu nadrzędnego, zostaną zastosowane do wszystkich jej elementów podrzędnych, takich jak road.local
i road.highway
.
Pamiętaj, że funkcje nadrzędne mogą obejmować niektóre elementy, które nie są uwzględnione we wszystkich funkcjach podrzędnych.
Dostępne są te funkcje:
all
(domyślna) wybiera wszystkie funkcje.administrative
zaznacza wszystkie regiony. Styl wpływa 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 lokalizacje.administrative.neighborhood
wybiera dzielnice.administrative.province
wybiera prowincje.
landscape
zaznacza wszystkie krajobrazy.landscape.man_made
wybiera obiekty stworzone 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 pokrycie terenu, czyli fizyczne materiały pokrywające powierzchnię Ziemi, takie jak lasy, łąki, mokradła i goły grunt.landscape.natural.terrain
wybiera elementy ukształtowania terenu, takie jak wysokość, nachylenie i orientacja.
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 placówki.poi.park
wybiera parki.poi.place_of_worship
wybiera miejsca kultu, m.in. kościoły, świątynie i meczety.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 pozwala wybrać etykiety 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ą poniższe elementy. Pamiętaj jednak, że konkretna funkcja może nie obsługiwać żadnego z elementów, niektórych lub wszystkich elementów:
all
(domyślna) 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 kontur 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
zaznacza tylko kontur 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 koloru początkowego. Efektem jest wyrenderowanie funkcji w skali szarości:
"stylers": [ { "saturation": -100 } ]
Ten fragment kodu całkowicie ukrywa funkcję:
"stylers": [ { "visibility": "off" } ]
Obsługiwane są te opcje stylu:
hue
(szesnastkowy ciąg RGB formatu#RRGGBB
) wskazuje kolor podstawowy.Uwaga: ta opcja ustawia odcień z zachowaniem nasycenia i jasności określonego w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Uzyskany kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na obiekty mapy ze stylem
hue
. W miarę możliwości używaj stylizatora bezwzględnegocolor
.lightness
(wartość zmiennoprzecinkowa między-100
a100
) wskazuje procentową zmianę jasności elementu. Wartości ujemne zwiększają poziom ciemności (gdzie -100 oznacza czarny), a wartości dodatnie zwiększają jasność (gdzie +100 oznacza kolor 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). Uzyskany kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na obiekty mapy ze stylem
lightness
. W miarę możliwości używaj stylizatora bezwzględnegocolor
.saturation
(wartość zmiennoprzecinkowa z zakresu od-100
do100
) wskazuje procentową zmianę intensywności koloru podstawowego, która zostanie zastosowana do elementu.Uwaga: ta opcja ustawia nasycenie z zachowaniem barwy i jasności określonych w domyślnym stylu Google (lub w innych opcjach stylów zdefiniowanych na mapie). Uzyskany kolor zależy od stylu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłynie to na obiekty mapy ze stylem
saturation
. W miarę możliwości zalecamy używanie stylizatora bezwzględnegocolor
.gamma
(wartość zmiennoprzecinkowa z przedziału0.01
–10.0
, gdzie1.0
nie wprowadza korekty) wskazuje stopień korekcji gamma stosowanej do elementu. Korekcje gamma zmieniają jasność kolorów w nieliniowy sposób, nie wpływając na wartości bieli ani czerni. Korekcja gamma służy zwykle do zmiany kontrastu wielu elementów. Możesz na przykład zmodyfikować parametr 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 obiekty mapy ze stylem
gamma
. W miarę możliwości używaj stylizatora absolutnegocolor
.invert_lightness
(jeślitrue
) odwraca istniejącą jasność. Jest to przydatne na przykład wtedy, 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 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 element wyświetla się na mapie i w jaki sposób. 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ów, a parki tracą tekst etykiety, ale zachowują ikonę etykiety.color
(szesnastkowy ciąg RGB w formacie#RRGGBB
) ustawia kolor obiektu.weight
(wartość całkowita większa niż lub równa 0) określa wagę obiektu w pikselach. Ustawienie wagi na dużą wartość może spowodować przycinanie w pobliżu obramowań kafelków.
Reguły stylu będą stosowane w określonej przez Ciebie kolejności. Nie używaj wielu operacji w jednej operacji stylu. Zamiast tego należy zdefiniować każdą operację 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 tych istniejących stylach (jeśli występują).
Model barwy, nasycenia i jasności
Mapy stylizowane korzystają z modelu odcień, nasycenia i jasności (HSL) do określania koloru w operacjach stylizowania. Odcień wskazuje kolor podstawowy, nasycenie wskazuje intensywność danego koloru, a jasność wskazuje względną ilość bieli lub czerni w danym kolorze.
Korekta gamma zmienia jasność w przestrzeni kolorów, zazwyczaj zwiększając lub zmniejszając kontrast. Dodatkowo model HSL definiuje kolor w przestrzeni współrzędnych, gdzie hue
wskazuje orientację w koła kolorów, a nasycenie i jasność wskazują amplitudy 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 podstawowego koloru, czyli jego orientacji wokół koła kolorów, a nie jego nasycenia czy jasności, które są podawane oddzielnie jako zmiany procentowe.
Możesz na przykład określić odcień samego koloru zielonego jako hue:0x00ff00
lub hue:0x000100
. Oba odcienie są identyczne. Obie wartości wskazują na 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 nich nie wskazuje orientacji w przestrzeni współrzędnych HSL. Przykłady to „#000000” (czarne), „#FFFFFF” (białe) i wszystkie odcienie szarości. Aby wybrać czarny, biały lub szary, usuń wszystkie pola saturation
(ustaw wartość na -100
) i dostosuj 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 istniejącego obiektu saturation
ani lightness
.