Opcje stylu pozwalają dostosować wygląd standardowych grafik Google style mapy, zmieniające wygląd obiektów, takich jak drogi, parki, firmy i inne ciekawe miejsca. A także zmiana stylu możesz je całkowicie ukryć. Oznacza to, że możesz: uwydatniać poszczególne elementy mapy lub sprawić, że będzie ona uzupełnieniem stylu otaczającej strony.
Przykłady
Poniższa deklaracja stylu JSON zmienia kolor wszystkich funkcji mapy na wyszarzony, a następnie kolory geometrii arterii komunikacyjnej na niebiesko i ukrywa etykiety krajobrazu całkowicie:
[ { "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 (opcjonalny) – funkcje do wyboru. dla tej modyfikacji stylu. Cechy to cechy geograficzne na mapę, w tym drogi, parki, zbiorniki wodne i inne. Jeśli nie określisz obiektu, wybrane są wszystkie obiekty.
- elementType (opcjonalny) – właściwość elementu określoną cechę do wyboru. Elementy to części składowe obiektu, w tym etykiet i geometrii. Jeśli nie określisz elementu, wszystkie elementy obiekt.
- stylers – reguły, które mają być stosowane do wybranych obiektów . Style określają kolor, widoczność i wagę obiektu. Do obiektu możesz zastosować jeden lub więcej stylów.
Aby określić styl, musisz połączyć elementy featureType
i
Selektory elementType
i stylers
w stylu
. Możesz kierować reklamy na dowolną kombinację cech w jednej tablicy. Pamiętaj jednak:
liczba stylów, które można zastosować jednocześnie, jest ograniczona. Jeśli Twój styl
tablica przekracza maksymalną liczbę znaków, styl nie został zastosowany.
Pozostała część tej strony zawiera więcej informacji o funkcjach, elementach stylizatory.
featureType
Ten fragment kodu JSON wybiera wszystkie drogi na mapie:
{ "featureType": "road" }
Obiekty lub typy obiektów to cechy geograficzne na mapie, w tym drogi, parki, zbiorniki wodne, firmy i inne.
Cechy tworzą drzewo kategorii, przy czym all
jako pierwiastka. Jeśli nie określisz obiektu, wybrane zostaną wszystkie obiekty.
Ten sam efekt ma określenie cechy all
.
Niektóre cechy zawierają cechy podrzędne określane za pomocą kropki
. Na przykład landscape.natural
lub
road.local
Jeśli określisz tylko funkcję nadrzędną, np.
road
, do których będą stosowane style określone dla elementu nadrzędnego
wszystkich jego elementów podrzędnych, takich jak road.local
i
road.highway
Pamiętaj, że funkcje nadrzędne mogą zawierać elementy, które nie są uwzględnione we wszystkich 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 geograficzne obramowania lub wypełnienia.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 krajobrazy.landscape.man_made
wybiera obiekty stworzone przez człowieka, takie jak budynki i inne w różnych strukturach.landscape.natural
wybiera obiekty naturalne, takie jak góry, rzeki, pustynie i lodowce.landscape.natural.landcover
wybiera elementy pokrycia terenu, materiał fizyczny pokrywa powierzchnię Ziemi, np. lasy, łąki, mokradła i pusty teren.landscape.natural.terrain
wybiera elementy terenu na poziomie gruntu. takich jak wysokość, nachylenie i orientacja.
poi
zaznacza wszystkie ciekawe miejsca.poi.attraction
wybiera atrakcje turystyczne.poi.business
wybiera firmy.poi.government
wybiera budynki rządowe.poi.medical
wybiera służby ratunkowe, w tym: szpitale, apteki, policja, lekarze itp.poi.park
wybiera parki.poi.place_of_worship
wybiera miejsca kultu, w tym kościoły, świątynie, meczety itp.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 z: kontrolowanego dostępu.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 podgrupy cech. Droga, na przykład składa się z linii graficznej (geometrii) na mapie, a także tekstu określające jego nazwę (etykietę).
Dostępne są następujące elementy, pamiętaj jednak, że konkretna funkcja może nie obsługiwać żadnego, niektórych lub wszystkich elementów:
all
(domyślnie) wybiera wszystkie elementy określonej cechy.geometry
wybiera wszystkie elementy geometryczne w określonym zakresie funkcji.geometry.fill
wybiera tylko wypełnienie obiektu geometrii.geometry.stroke
wybiera tylko kreskę obiektu geometrii.
labels
wybiera etykiety tekstowe powiązane z tagiem zgodnie z określoną cechą.labels.icon
wybiera tylko ikonę wyświetlaną w etykiety funkcji.labels.text
zaznaczy tylko tekst etykiety.labels.text.fill
wybiera tylko wypełnienie etykiety. wypełnienie etykiety zwykle renderuje się jako kolorowy kontur, otacza tekst etykiety.labels.text.stroke
wybiera tylko kreski tekstu.
stylers
Style to opcje formatowania, które możesz zastosować do obiektów mapy i .
Poniższy fragment kodu JSON zawiera funkcję w kolorze jasnozielonym z użyciem atrybutu Wartość RGB:
"stylers": [ { "color": "#99FF33" } ]
Ten fragment kodu usuwa całą intensywność z koloru obiektu, niezależnie od jej kolor początkowy. Efektem jest wyrenderowanie skali szarości:
"stylers": [ { "saturation": -100 } ]
Ten fragment kodu ukrywa funkcję całkowicie:
"stylers": [ { "visibility": "off" } ]
Obsługiwane są te opcje stylu:
hue
(szesnastkowy ciąg znaków w formacie RGB)#RRGGBB
) wskazuje kolor podstawowy.Uwaga: ta opcja ustawia barwę przy zachowaniu nasycenia i jasności określone w domyślnym stylu Google (lub w innych opcjach stylu na mapie). Otrzymany kolor zależy od stylu elementu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpływają na obiekty mapy z atrybutem
hue
. Lepiej użyj bezwzględnego stylizatoracolor
, jeśli to możliwe.lightness
(wartość zmiennoprzecinkowa między-100
i100
) wskazuje procentową zmianę jasności . 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ść przy zachowaniu nasycenia i barwy określone w domyślnym stylu Google (lub w innych opcjach stylu na mapie). Otrzymany kolor zależy od stylu elementu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpływają na obiekty mapy z atrybutem
lightness
. Lepiej aby użyć bezwzględnego stylizatoracolor
, jeśli to możliwe.saturation
(wartość zmiennoprzecinkowa między-100
i100
) wskazuje procentową zmianę intensywności podstawowy kolor elementu.Uwaga: ta opcja ustawia nasycenie przy zachowaniu barwy i jasności. określone w domyślnym stylu Google (lub w innych opcjach stylu na mapie). Otrzymany kolor zależy od stylu elementu mapy podstawowej. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpływają na obiekty mapy z atrybutem
saturation
. Jest lepiej jest użyć stylu bezwzględnegocolor
, jeśli to możliwe.gamma
(wartość zmiennoprzecinkowa z zakresu od0.01
do10.0
, gdzie1.0
nie stosuje korekty) wskazuje zakres korekcji gamma elementu. Korekty gamma modyfikują jasność kolorów w sposób nieliniowy, nie wpływając na białe lub czarne. Korekcja gamma jest zwykle używana do kontrast wielu elementów. Można na przykład zmienić zakres gamma na Zwiększ lub zmniejsz kontrast między krawędziami a wnętrzem .Uwaga: ta opcja dostosowuje jasność względem domyślnego poziomu jasności ekranu za pomocą krzywej gamma. Jeśli Google wprowadzi jakiekolwiek zmiany na mapie podstawowej stylu, zmiany te wpłyną na obiekty mapy
gamma
Lepiej jest użyć bezwzględnejcolor
jak to możliwe.invert_lightness
(jeślitrue
) odwraca istniejący poziom jasności. Jest to przydatne na przykład w przypadku szybkiego przełączyć na ciemniejszą mapę z białym tekstem.Uwaga: ta opcja po prostu odwraca domyślny styl Google. Jeśli Google nie wprowadzisz żadnych zmian w stylu mapy podstawowej, funkcje z motywem
invert_lightness
. Jest lepiej jest użyć stylu bezwzględnegocolor
, jeśli to możliwe.visibility
(on
,off
lubsimplified
) wskazuje, czy i w jaki sposób element jest widoczny mapę. Widocznośćsimplified
usuwa niektóre cechy stylu z funkcji, których dotyczy problem; na przykład drogi są upraszczane jako cieńsze, linii bez obramowań. Parki tracą tekst etykiety, ale zachowują ikonę etykiety.color
(szesnastkowy ciąg znaków w formacie RGB)#RRGGBB
) ustawia kolor obiektu.- Zestawy:
weight
(wartość całkowita, większa lub równa 0) waga obiektu w pikselach. Ustawienie wysokiej wartości wagi może w pobliżu obramowania kafelków.
Reguły stylu są stosowane w określonej kolejności. Nie łącz wiele operacji w jedną operację stylu. Zamiast tego zdefiniuj każdy jako osobny wpis w tablicy stylów.
Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przemienne. Funkcje i/lub elementów zmodyfikowanych przez operacje stylu (zwykle) mają istniejące style. Operacje są wykonywane na istniejących stylach (jeśli są dostępne).
Model barwy, nasycenia i jasności
W stylach map używane są odcienie, nasycenie, jasność (HSL) do określenia koloru w stylu operacji. Odcień wskazuje kolor podstawowy, nasycenie. wskazuje intensywność danego koloru, a jasność wskazuje jego intensywność. względna ilość bieli lub czerni w kolorze składowym.
Gamma
korekcja modyfikuje jasność w przestrzeni kolorów, zwykle
aby zwiększyć lub zmniejszyć kontrast. Dodatkowo model HSL definiuje kolor
w przestrzeni współrzędnych, gdzie hue
wskazuje orientację
na kole 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 wyjątkiem odcieni bieli i
czarnych.
hue
pobiera szesnastkową wartość koloru HTML, ale używa tylko tej wartości.
aby określić kolor podstawowy, czyli jego orientację wokół koloru
a nie jego nasycenie czy jasność,
wyrażonych oddzielnie jako zmiany procentowe.
Możesz na przykład zdefiniować odcień koloru zielonego jako
hue:0x00ff00
lub hue:0x000100
. Oba odcienie
identyczna. Obie wartości w modelu kolorów HSL wskazują czystą zieleń.
Koło kolorów RGB
Wartości RGB hue
złożone z czerwonych, zielonych i niebieskich w równych częściach
nie wskazują barwy, bo żadna z tych wartości nie wskazuje orientacji
przestrzeni współrzędnych HSL. Przykłady: „#000000” (czarny), „#FFFFFF” (biały),
i wszystkich czystych odcieniach szarości. Aby zmienić kolor na czarny, biały lub szary, musisz:
usuń wszystkie zmienne saturation
(ustaw wartość na -100
) i
ustaw lightness
.
Ponadto, gdy modyfikujesz istniejące obiekty, które mają już określony kolor
schemat, zmiana wartości takiej jak hue
nie powoduje zmiany obecnej wartości
saturation
lub lightness
.