Dokumentacja stylu dla Maps JavaScript API

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ędnego color.

• lightness (wartość zmiennoprzecinkowa między -100 a 100) 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ędnego color.

• saturation (wartość zmiennoprzecinkowa z zakresu od -100 do 100) 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ędnego color.

• gamma (wartość zmiennoprzecinkowa z przedziału 0.01–10.0, gdzie 1.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 absolutnego color.

• invert_lightness (jeśli true) 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ędnego color.

• visibility (on, off lub simplified) 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.