Справочник по стилю для Maps JavaScript API

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.
Выберите платформу: Android iOS JavaScript

С помощью параметров стиля вы можете настроить представление стандартных стилей карт 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 . Если есть возможность, лучше использовать стайлер абсолютного color .

  • lightness (значение с плавающей запятой от -100 до 100 ) указывает процентное изменение яркости элемента. Отрицательные значения увеличивают темноту (где -100 указывает черный цвет), а положительные значения увеличивают яркость (где +100 указывает белый цвет).

    Примечание. Этот параметр задает яркость, сохраняя при этом насыщенность и оттенок, указанные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете на карте). Результирующий цвет соответствует стилю базовой карты. Если Google внесет какие-либо изменения в базовый стиль карты, эти изменения повлияют на элементы вашей карты, оформленные с учетом lightness . Если есть возможность, лучше использовать стайлер абсолютного color .

  • saturation (значение с плавающей запятой от -100 до 100 ) указывает процентное изменение интенсивности основного цвета, применяемого к элементу.

    Примечание. Этот параметр задает насыщенность, сохраняя при этом оттенок и яркость, указанные в стиле Google по умолчанию (или в других параметрах стиля, которые вы определяете на карте). Результирующий цвет соответствует стилю базовой карты. Если Google внесет какие-либо изменения в стиль базовой карты, эти изменения повлияют на элементы вашей карты, оформленные с помощью saturation . Если есть возможность, лучше использовать стайлер абсолютного color .

  • gamma (значение с плавающей запятой от 0.01 до 10.0 , где 1.0 не применяет коррекцию) указывает величину гамма-коррекции, применяемую к элементу. Гамма-коррекция изменяет яркость цветов нелинейным образом, не влияя при этом на значения белого или черного. Гамма-коррекция обычно используется для изменения контраста нескольких элементов. Например, вы можете изменить гамму, чтобы увеличить или уменьшить контраст между краями и внутренней частью элементов.

    Примечание. Этот параметр регулирует яркость по отношению к стилю Google по умолчанию, используя гамма-кривую. Если Google внесет какие-либо изменения в стиль базовой карты, эти изменения повлияют на объекты вашей карты, оформленные с помощью gamma . Если есть возможность, лучше использовать стайлер абсолютного color .

  • invert_lightness (если true ) инвертирует существующую яркость. Это полезно, например, для быстрого переключения на более темную карту с белым текстом.

    Примечание. Этот параметр просто инвертирует стиль Google по умолчанию. Если Google внесет какие-либо изменения в стиль базовой карты, эти изменения повлияют на функции вашей карты, оформленные с помощью invert_lightness . Если есть возможность, лучше использовать стайлер абсолютного color .

  • 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 .