С помощью параметров стиля вы можете настроить представление стандартных стилей карт Google, изменяя визуальное отображение таких объектов, как дороги, парки, предприятия и другие достопримечательности. Помимо изменения стиля этих функций, вы можете полностью скрыть их. Это означает, что вы можете подчеркнуть отдельные компоненты карты или сделать так, чтобы карта дополняла стиль окружающей страницы.
Примеры
Следующее объявление стиля JSON превращает все объекты карты в серый цвет, затем окрашивает геометрию магистральной дороги в синий цвет и полностью скрывает метки ландшафта:
[ { "featureType": "all", "stylers": [ { "color": "#C0C0C0" } ] },{ "featureType": "road.arterial", "elementType": "geometry", "stylers": [ { "color": "#CCFFFF" } ] },{ "featureType": "landscape", "elementType": "labels", "stylers": [ { "visibility": "off" } ] } ]
Объект JSON
Объявление стиля JSON состоит из следующих элементов:
- FeatureType (необязательно) — функции, которые нужно выбрать для этой модификации стиля. Объекты — это географические характеристики на карте, включая дороги, парки, водоемы и т. д. Если вы не укажете объект, будут выбраны все объекты.
- elementType (необязательно) — свойство указанного объекта, который нужно выбрать. Элементы — это части объекта, включая метки и геометрию. Если вы не укажете элемент, будут выбраны все элементы объекта.
- стилисты — правила, применяемые к выбранным функциям и элементам. Стайлеры указывают цвет, видимость и вес объекта. К объекту можно применить один или несколько стилей.
Чтобы указать стиль, вы должны объединить набор селекторов featureType
и elementType
и ваши stylers
в массив стилей. Вы можете настроить таргетинг на любую комбинацию функций в одном массиве. Однако количество стилей, которые вы можете применить одновременно, ограничено. Если ваш массив стилей превышает максимальное количество символов, стиль не применяется.
Остальная часть этой страницы содержит дополнительную информацию о функциях, элементах и стилях.
featureType
Следующий фрагмент JSON выбирает все дороги на карте:
{ "featureType": "road" }
Объекты или типы объектов — это географические характеристики на карте, включая дороги, парки, водоемы, предприятия и т. д.
Объекты образуют дерево категорий, корнем которого являются all
. Если вы не укажете объект, будут выбраны все объекты. Указание функции all
имеет одинаковый эффект.
Некоторые объекты содержат дочерние объекты, которые вы указываете с помощью точечной записи. Например, landscape.natural
или road.local
. Если вы укажете только родительский объект, например road
, стили, указанные для родительского объекта, будут применяться ко всем его дочерним объектам, например road.local
и road.highway
.
Обратите внимание, что родительские объекты могут включать в себя некоторые элементы, которые не включены во все их дочерние объекты.
Доступны следующие функции:
-
all
(по умолчанию) выбирает все функции. -
administrative
выбирает все административные области. Стилизация влияет только на названия административных областей, но не на географические границы или заливку.-
administrative.country
выбирает страны. -
administrative.land_parcel
выбирает земельные участки. -
administrative.locality
выбирает населенные пункты. -
administrative.neighborhood
выбирает районы. -
administrative.province
выбирает провинции.
-
-
landscape
выбирает все пейзажи.-
landscape.man_made
выбирает искусственные объекты, такие как здания и другие конструкции. -
landscape.natural
выбирает природные объекты, такие как горы, реки, пустыни и ледники. -
landscape.natural.landcover
выбирает особенности земного покрова, физический материал, покрывающий поверхность земли, например леса, луга, водно-болотные угодья и голую землю. -
landscape.natural.terrain
выбирает особенности рельефа земной поверхности, такие как высота, уклон и ориентация.
-
-
poi
выбирает все точки интереса.-
poi.attraction
выбирает туристические достопримечательности. -
poi.business
выбирает предприятия. -
poi.government
выбирает правительственные здания. -
poi.medical
выбирает службы экстренной помощи, включая больницы, аптеки, полицию, врачей и другие. -
poi.park
выбирает парки. -
poi.place_of_worship
выбирает места отправления культа, включая церкви, храмы, мечети и другие. -
poi.school
выбирает школы. -
poi.sports_complex
выбирает спортивные комплексы.
-
-
road
выбирает все дороги.-
road.arterial
выбирает магистральные дороги. -
road.highway
выбирает автомагистрали. -
road.highway.controlled_access
выбирает автомагистрали с контролируемым доступом. -
road.local
выбирает местные дороги.
-
-
transit
выбирает все транзитные станции и линии.-
transit.line
выбирает транспортные линии. -
transit.station
выбирает все транзитные станции. -
transit.station.airport
выбирает аэропорты. -
transit.station.bus
выбирает автобусные остановки. -
transit.station.rail
выбирает железнодорожные станции.
-
-
water
выбирает водоемы.
elementType
Следующий фрагмент JSON выбирает метки для всех местных дорог:
{ "featureType": "road.local", "elementType": "labels" }
Элементы — это подразделения объекта. Дорога, например, состоит из графической линии (геометрии) на карте, а также текста, обозначающего ее название (метки).
Доступны следующие элементы, но учтите, что конкретная функция может поддерживать ни один, некоторые или все элементы:
-
all
(по умолчанию) выбирает все элементы указанного объекта. -
geometry
выбирает все геометрические элементы указанного объекта.-
geometry.fill
выбирает только заливку геометрии объекта. -
geometry.stroke
выбирает только обводку геометрии объекта.
-
-
labels
выбирает текстовые метки, связанные с указанным объектом.-
labels.icon
выбирает только значок, отображаемый внутри метки объекта. -
labels.text
выбирает только текст метки. -
labels.text.fill
выбирает только заливку метки. Заливка метки обычно отображается в виде цветного контура, окружающего текст метки. -
labels.text.stroke
выбирает только обводку текста метки.
-
stylers
Стили — это параметры форматирования, которые можно применять к объектам и элементам карты.
Следующий фрагмент JSON отображает объект ярко-зеленым цветом с использованием значения RGB:
"stylers": [ { "color": "#99FF33" } ]
Этот фрагмент удаляет всю интенсивность цвета объекта, независимо от его начального цвета. Эффект заключается в отображении объекта в оттенках серого:
"stylers": [ { "saturation": -100 } ]
Этот фрагмент полностью скрывает функцию:
"stylers": [ { "visibility": "off" } ]
Поддерживаются следующие параметры стиля:
-
hue
(шестнадцатеричная строка RGB в формате#RRGGBB
) указывает основной цвет.Примечание. Этот параметр задает оттенок, сохраняя при этом насыщенность и яркость, указанные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете на карте). Результирующий цвет соответствует стилю базовой карты. Если Google внесет какие-либо изменения в базовый стиль карты, эти изменения повлияют на элементы вашей карты, оформленные с помощью
hue
. Если есть возможность, лучше использовать стайлер Absolutecolor
. -
lightness
(значение с плавающей запятой от-100
до100
) указывает процентное изменение яркости элемента. Отрицательные значения увеличивают темноту (где -100 соответствует черному цвету), а положительные значения увеличивают яркость (где +100 соответствует белому).Примечание. Этот параметр устанавливает яркость, сохраняя при этом насыщенность и оттенок, указанные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете на карте). Результирующий цвет соответствует стилю базовой карты. Если Google внесет какие-либо изменения в базовый стиль карты, эти изменения повлияют на элементы вашей карты, оформленные с использованием
lightness
. Если есть возможность, лучше использовать стайлер Absolutecolor
. -
saturation
(значение с плавающей запятой от-100
до100
) указывает процентное изменение интенсивности основного цвета, применяемое к элементу.Примечание. Этот параметр задает насыщенность, сохраняя при этом оттенок и яркость, заданные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете на карте). Результирующий цвет соответствует стилю базовой карты. Если Google вносит какие-либо изменения в базовый стиль карты, эти изменения влияют на элементы вашей карты, оформленные с использованием
saturation
. Если есть возможность, лучше использовать стайлер Absolutecolor
. -
gamma
(значение с плавающей запятой от0.01
до10.0
, где1.0
не применяет коррекцию) указывает величину гамма-коррекции, применяемую к элементу. Гамма-коррекция изменяет яркость цветов нелинейным образом, не затрагивая при этом значения белого или черного. Гамма-коррекция обычно используется для изменения контрастности нескольких элементов. Например, вы можете изменить гамму, чтобы увеличить или уменьшить контраст между краями и внутренней частью элементов.Примечание. Этот параметр регулирует яркость относительно стиля Google по умолчанию с использованием гамма-кривой. Если Google вносит какие-либо изменения в базовый стиль карты, эти изменения влияют на элементы вашей карты, стилизованные с помощью
gamma
. Если есть возможность, лучше использовать стайлер Absolutecolor
. -
invert_lightness
(еслиtrue
) инвертирует существующую яркость. Это полезно, например, для быстрого переключения на более темную карту с белым текстом.Примечание. Этот параметр просто инвертирует стиль Google по умолчанию. Если Google вносит какие-либо изменения в базовый стиль карты, эти изменения влияют на элементы вашей карты, стилизованные с помощью
invert_lightness
. Если есть возможность, лучше использовать стайлер Absolutecolor
. -
visibility
(on
,off
илиsimplified
) указывает, отображается ли элемент на карте и каким образом.simplified
видимость удаляет некоторые элементы стиля из затронутых элементов; дороги, например, упрощены до более тонких линий без контуров, а парки теряют текст надписей, но сохраняют значок надписи. -
color
(шестнадцатеричная строка RGB в формате#RRGGBB
) задает цвет объекта. -
weight
(целое значение, большее или равное нулю) задает вес объекта в пикселях. Установка высокого значения веса может привести к обрезке вблизи границ плитки.
Правила стиля применяются в указанном вами порядке. Не объединяйте несколько операций в одну операцию стиля. Вместо этого определите каждую операцию как отдельную запись в массиве стилей.
Примечание. Порядок важен, поскольку некоторые операции некоммутативны. Объекты и/или элементы, которые изменяются с помощью операций со стилями (обычно), уже имеют существующие стили. Операции действуют на существующие стили, если они присутствуют.
Модель оттенка, насыщенности и яркости
Стилизованные карты используют модель оттенка, насыщенности, яркости (HSL) для обозначения цвета в операциях стилизатора. Оттенок указывает на основной цвет, насыщенность указывает на интенсивность этого цвета, а яркость указывает на относительное количество белого или черного цвета в составляющем цвете.
Гамма-коррекция изменяет яркость цветового пространства, как правило, для увеличения или уменьшения контраста. Кроме того, модель HSL определяет цвет в координатном пространстве, где hue
указывает ориентацию внутри цветового круга, а насыщенность и яркость указывают амплитуды по разным осям. Оттенки измеряются в цветовом пространстве RGB, которое аналогично большинству цветовых пространств RGB, за исключением того, что оттенки белого и черного отсутствуют.
Хотя hue
принимает шестнадцатеричное значение цвета HTML, оно использует это значение только для определения основного цвета, то есть его ориентации вокруг цветового круга, а не его насыщенности или яркости, которые указываются отдельно в виде процентных изменений.
Например, вы можете определить оттенок чистого зеленого как hue:0x00ff00
или hue:0x000100
. Оба оттенка идентичны. Оба значения указывают на чистый зеленый цвет в цветовой модели HSL.
Цветовое колесо RGB
Значения hue
RGB, которые состоят из равных частей красного, зеленого и синего, не указывают оттенок, поскольку ни одно из этих значений не указывает ориентацию в координатном пространстве HSL. Примеры: «#000000» (черный), «#FFFFFF» (белый) и все чистые оттенки серого. Чтобы указать черный, белый или серый цвет, необходимо удалить всю saturation
(установить значение -100
) и вместо этого отрегулировать lightness
.
Кроме того, при изменении существующих объектов, у которых уже есть цветовая схема, изменение такого значения, как hue
не меняет существующую saturation
или lightness
.