Dokumentacja stylu dla Maps JavaScript API

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 je całkowicie ukryć. Oznacza to, że możesz wyróżnić określone komponenty mapy lub dostosować mapę do stylu sąsiadującej z nią strony.

Przykłady

Poniższa deklaracja stylu JSON zmienia kolor wszystkich obiektów mapy na wyszarzony, a następnie geometrię dróg artystycznych na niebieski, a etykiety poziome całkowicie ukrywa:

[
  {
    "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 (opcjonalny) – cechy, które mają zostać wybrane w przypadku tej modyfikacji stylu. Obiekty to cechy geograficzne na mapie, w tym drogi, parki, zbiorniki wodne i inne. Jeśli nie wybierzesz funkcji, zostaną wybrane wszystkie.
• elementType (opcjonalnie) – właściwość wybranej funkcji. Elementy to części składowe obiektu, 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 selektor stylers w tablicę stylów. Możesz kierować reklamy na dowolną kombinację funkcji w jednym 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"
}

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ó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_parcelwybiera działki.
  • administrative.locality wybiera lokalizacje.
  • 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 obiekty.
  • 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 zaznacza wszystkie ciekawe 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 dla 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 kolorowy kontur otaczający tekst etykiety.
  • 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 ukrywa funkcję całkowicie:

    "stylers": [
      { "visibility": "off" }
    ]

Obsługiwane są te opcje stylu:

• hue (ciąg szesnastkowy 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ść przy zachowaniu nasycenia i odcienia określonych 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. Lepiej jest użyć stylu bezwzględnego color, jeśli to możliwe.

• 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, 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 podstawowej. 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ć 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. 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 zmiany w stylu mapy podstawowej, wpłyną one na obiekty mapy z atrybutem 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 podstawowym stylu mapy, zmiany te wpłyną na elementy mapy stylizowane za pomocą invert_lightness. Jeśli to możliwe, lepiej użyć stylizatora color.

• visibility (on, off lub simplified) wskazuje, czy element ma się wyświetlać na mapie i w jaki sposób. Visibility simplified 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) ustawia wagę cechy 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 stylów.

Uwaga: kolejność jest ważna, ponieważ niektóre operacje nie są przechodnie. Cechy lub elementy zmodyfikowane przez operacje stylu (zwykle) mają już istniejące style. Operacje są wykonywane na istniejących stylach, jeśli są dostępne.

Model odcień, nasycenie, jasność

Mapy stylizowane używają modelu tonu, nasycenia i jasności (HSL) do oznaczania kolorów w operacjach stylizatora. Odcień 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.