Przewodnik po stylach w Maps JavaScript API

Dzięki opcjom stylu możesz dostosować prezentację standardowych stylów map Google, zmieniając wygląd elementów takich jak drogi, parki, firmy i inne ciekawe miejsca. Możesz nie tylko zmienić styl tych elementów, ale też całkowicie je ukryć. Oznacza to, że możesz wyróżnić określone elementy mapy lub dopasować mapę do stylu otaczającej ją strony.

Przykłady

Poniższa deklaracja stylu JSON zmienia kolor wszystkich obiektów na mapie na szary, a następnie koloruje geometrię dróg głównych 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 (opcjonalny) – obiekty, które mają zostać wybrane do tej modyfikacji stylu. Elementy to obiekty geograficzne na mapie, takie jak drogi, parki czy zbiorniki wodne. Jeśli nie określisz funkcji, zostaną wybrane wszystkie.
• elementType (opcjonalny) – właściwość określonego elementu, który ma zostać wybrany. Elementy to części składowe obiektu, w tym etykiety i geometria. Jeśli nie określisz elementu, zostaną wybrane wszystkie elementy funkcji.
• stylers – reguły, które mają być stosowane do wybranych cech i elementów. Style określają kolor, widoczność i grubość elementu. Do elementu 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. W jednej tablicy możesz kierować reklamy na dowolną kombinację funkcji. Liczba stylów, które możesz zastosować jednocześnie, jest jednak ograniczona. Jeśli tablica stylów przekracza maksymalną liczbę znaków, nie zostanie zastosowany żaden styl.

W dalszej części tej strony znajdziesz więcej informacji o obiektach, elementach i stylach.

featureType

Ten fragment kodu JSON wybiera wszystkie drogi na mapie:

{
  "featureType": "road"
}

Elementy lub typy elementów to cechy geograficzne na mapie, takie jak drogi, parki, zbiorniki wodne, firmy i inne.

Funkcje tworzą drzewo kategorii, którego korzeniem jest all. Jeśli nie określisz funkcji, zostaną wybrane wszystkie funkcje. Określenie funkcji all ma taki sam efekt.

Niektóre funkcje zawierają funkcje podrzędne, które określa się za pomocą notacji kropkowej. Na przykład landscape.natural lub road.local. Jeśli określisz tylko element nadrzędny, np. road, style określone dla elementu nadrzędnego będą stosowane do 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ślna) wybiera wszystkie cechy.
• administrative – wybiera wszystkie regiony. Styl wpływa tylko na etykiety regionó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 – zaznacz wszystkie krajobrazy.
  • landscape.man_made wybiera obiekty stworzone przez człowieka, takie jak budynki i inne konstrukcje.
  • landscape.natural wybiera elementy naturalne, takie jak góry, rzeki, pustynie i lodowce.
  • landscape.natural.landcover wybiera elementy pokrycia terenu, czyli fizyczny materiał pokrywający powierzchnię Ziemi, taki jak lasy, łąki, mokradła i nieużytki.
  • landscape.natural.terrain wybiera cechy terenu powierzchni lądowej, takie jak wysokość, nachylenie i orientacja.
• poi – wybiera 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, 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 – zaznaczenie wszystkich dróg.
  • road.arterial wybiera drogi główne.
  • road.highway wybiera autostrady.
  • road.highway.controlled_access wybiera autostrady z kontrolowanym dostępem.
  • 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 wszystkich dróg lokalnych:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Elementy to podziały funkcji. Na przykład droga składa się z linii graficznej (geometrii) na mapie oraz tekstu oznaczającego jej nazwę (etykiety).

Dostępne są te elementy, ale pamiętaj, że konkretna funkcja może nie obsługiwać żadnego z nich, niektóre z nich lub wszystkie:

Kolory tekstu etykiety fill i stroke zmieniają się w zależności od poziomu powiększenia. Aby zapewnić spójne działanie na różnych poziomach powiększenia, zawsze definiuj zarówno fill, jak i stroke.

• all (domyślna) wybiera wszystkie elementy określonej cechy.
• geometry wybiera wszystkie elementy geometryczne określonej cechy.
  • geometry.fill wybiera tylko wypełnienie geometrii elementu.
  • geometry.stroke wybiera tylko obrys geometrii elementu.
• labels wybiera etykiety tekstowe powiązane z określoną cechą.
  • labels.icon wybiera tylko ikonę wyświetlaną w etykiecie funkcji.
  • 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 obrys tekstu etykiety.

stylers

Style to opcje formatowania, które można stosować do obiektów i elementów mapy.

Ten fragment kodu JSON wyświetla element w kolorze jaskrawozielonym, używając wartości RGB:

"stylers": [
  { "color": "#99FF33" }
]

Ten fragment kodu usuwa całą intensywność koloru elementu, niezależnie od jego koloru początkowego. W efekcie funkcja jest wyświetlana w trybie szarości:

"stylers": [
  { "saturation": -100 }
]

Ten fragment kodu całkowicie ukrywa funkcję:

    "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 zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy stylizowane za pomocą hue. Jeśli to możliwe, lepiej używać stylera bezwzględnego 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 zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy stylizowane za pomocą lightness. Jeśli to możliwe, lepiej używać stylera bezwzględnego color.

• saturation (wartość zmiennoprzecinkowa z zakresu od -100 do 100) wskazuje procentową zmianę intensywności koloru podstawowego, który ma zostać zastosowany do elementu.

  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 zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy stylizowane za pomocą saturation. Jeśli to możliwe, lepiej używać bezwzględnego stylera color.

• gamma (wartość zmiennoprzecinkowa z zakresu od 0.01 do 10.0, gdzie 1.0 oznacza brak korekty) wskazuje poziom korekcji gamma, który ma zostać zastosowany do elementu. Korekty gamma modyfikują jasność kolorów w sposób nieliniowy, nie wpływając na wartości bieli ani czerni. Korekcja gamma jest zwykle używana do modyfikowania kontrastu wielu elementów. Możesz na przykład zmodyfikować gammę, aby zwiększyć lub zmniejszyć kontrast między krawędziami a wnętrzem elementów.

  Uwaga: ta opcja dostosowuje jasność względem domyślnego stylu Google za pomocą krzywej gamma. Jeśli Google wprowadzi zmiany w stylu mapy podstawowej, wpłyną one na funkcje mapy, które mają styl gamma. Jeśli to możliwe, lepiej używać bezwzględnego stylera color.

• invert_lightness (jeśli true) odwraca istniejącą jasność. Jest to przydatne, gdy chcesz na przykład 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łyną one na funkcje mapy stylizowane za pomocą invert_lightness. Jeśli to możliwe, lepiej używać bezwzględnego stylera color.

• visibility (on, off lub simplified) wskazuje, czy i jak element pojawia się na mapie. Widoczność simplified usuwa niektóre cechy stylu z obiektów, których dotyczy. Na przykład drogi są uproszczone do cieńszych linii bez konturów, a parki tracą tekst etykiety, ale zachowują jej ikonę.
• color (ciąg szesnastkowy RGB w formacie #RRGGBB) ustawia kolor elementu.
• weight (liczba całkowita większa lub równa 0) określa wagę elementu w pikselach. Ustawienie dużej wartości może spowodować przycinanie 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ą przemienne. Funkcje i elementy, które są modyfikowane za pomocą operacji na stylach, zwykle mają już przypisane style. Operacje są wykonywane na tych istniejących stylach, jeśli są obecne.

Model barwy, nasycenia i jasności

Mapy z własnym stylem używają modelu odcień, nasycenie, jasność (HSL) do oznaczania kolorów w operacjach stylera. Odcień wskazuje kolor podstawowy, nasycenie wskazuje intensywność tego koloru, a jasność wskazuje względną ilość bieli lub czerni w kolorze składowym.

Korekcja gamma modyfikuje jasność w przestrzeni barw, zwykle w celu zwiększenia lub zmniejszenia kontrastu. Dodatkowo model HSL definiuje kolor w przestrzeni współrzędnych, gdzie hue wskazuje orientację w kole kolorów, a nasycenie i jasność wskazują amplitudy wzdłuż różnych osi. Odcienie są mierzone w przestrzeni barw RGB, która jest podobna do większości przestrzeni barw RGB, z wyjątkiem tego, że nie ma w niej odcieni bieli i czerni.

Chociaż hue przyjmuje wartość szesnastkowego kodu koloru HTML, używa jej tylko do określenia koloru podstawowego, czyli jego położenia na kole kolorów, a nie nasycenia czy jasności, które są wskazywane osobno jako zmiany procentowe.

Na przykład odcień czystej zieleni można zdefiniować jako hue:0x00ff00 lub hue:0x000100. Oba odcienie są identyczne. Obie wartości wskazują czystą zieleń w modelu kolorów HSL.

Koło kolorów RGB

Wartości RGB hue, które składają się z równych części czerwieni, zieleni i niebieskiego, nie wskazują odcienia, ponieważ żadna z tych wartości nie wskazuje orientacji w przestrzeni współrzędnych HSL. Przykłady: „#000000” (czarny), „#FFFFFF” (biały) i wszystkie czyste odcienie szarości. Aby wskazać kolor czarny, biały lub szary, musisz usunąć wszystkie saturation (ustaw wartość na -100) i zamiast tego dostosować lightness.

Dodatkowo podczas modyfikowania istniejących funkcji, które mają już schemat kolorów, zmiana wartości takiej jak hue nie powoduje zmiany istniejącego saturation ani lightness.