Opis stylu dla pakietu SDK Map Google na Androida

Wybierz platformę: Android iOS JavaScript

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 uzupełniać styl 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 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 tej funkcji.
  • stylers – reguły stosowane do wybranych funkcji i elementów. Stylers 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. Możesz kierować reklamy na dowolną kombinację cech w jednej tablicy. 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"
}

Obiekty lub typy obiektów to cechy geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne, firmy itp.

Funkcje tworzą drzewo kategorii, którego korzeń to all. Jeśli nie określisz obiektu, wybrane zostaną wszystkie obiekty. Określenie właściwości all ma taki sam skutek.

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 niej będą stosowane do wszystkich jej 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. 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 miejscowości.
    • 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 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 podgrupy cech. 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 obiektu.
    • geometry.stroke wybiera tylko obrys geometrii funkcji.
  • labels wybiera etykiety tekstowe powiązane z określonym obiektem.
    • 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

Style to opcje formatowania, które możesz stosować do obiektów i 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 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ść (gdzie -100 oznacza czerń), a wartości dodatnie zwiększają jasność (gdzie +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 podstawowej. 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ć stylizatora color.

  • 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 przy zachowaniu barwy i jasności określonej 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 zmiany w stylu mapy podstawowej, wpłyną one na obiekty mapy z atrybutem saturation. Jeśli to możliwe, lepiej użyć stylizatora color.

  • gamma (wartość zmiennoprzecinkowa z zakresu 0.01–10.0, gdzie 1.0 oznacza brak korekty) wskazuje wielkość korekty wartości 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. 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ę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. Jeśli to możliwe, lepiej użyć stylizatora color.

  • 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ść

W przypadku map z stylem mapy używane są model barw, nasycenia i jasności (HSL) do określania koloru w ramach operacji stylizacji. 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.

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.

Na przykład odcień koloru zielonego możesz zdefiniować 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 zmienić kolor na czarny, biały lub szary, musisz usunąć wszystkie elementy saturation (ustaw 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.