Справочная документация по стилям в Maps JavaScript API

Выберите платформу: Android iOS JavaScript

С помощью параметров стиля вы можете настроить отображение стандартных стилей карт Google, изменив визуальное представление таких объектов, как дороги, парки, предприятия и другие достопримечательности. Помимо изменения стиля этих объектов, вы можете полностью скрыть их. Это означает, что вы можете выделить определенные компоненты карты или сделать так, чтобы карта дополняла стиль окружающей страницы.

Если вы хотите изменить стиль оформления в нескольких приложениях, воспользуйтесь облачной настройкой , которая доступна в консоли Google Cloud и требует указания идентификатора карты . Во избежание потенциальных конфликтов не следует объединять облачную настройку и жестко заданные стили в одном приложении.

Для более полного функционала оформления вы можете использовать JSON-стили с облачными стилями карт , которые предлагают более широкий список функций карт и большие возможности настройки. Схема JSON для облачных стилей карт несовместима с встроенными объявлениями стилей JSON. Это означает, что JSON для облачных стилей карт нельзя использовать напрямую в JavaScript API карт. Однако вы можете импортировать встроенные объявления стилей JSON в схему JSON для облачных стилей карт.

Примеры

Следующее объявление в формате 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"
}

Элементы — это подразделения объекта. Например, дорога состоит из графической линии (геометрии) на карте, а также текста, обозначающего её название (метки).

Доступны следующие элементы, однако следует отметить, что конкретная функция может поддерживать ни один, некоторые или все из этих элементов:

Цвета fill и stroke текста в подписи меняются в зависимости от уровня масштабирования. Для обеспечения единообразия отображения на разных уровнях масштабирования всегда задавайте параметры fill и stroke .

• 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 (целочисленное значение, большее или равное нулю) задает вес объекта в пикселях. Установка высокого значения weight может привести к обрезке вблизи границ тайлов.

Правила стиля применяются в указанном вами порядке. Не объединяйте несколько операций в одну операцию стиля. Вместо этого определите каждую операцию как отдельную запись в массиве стилей.

Примечание: порядок операций важен, поскольку некоторые операции не коммутативны. Функции и/или элементы, которые изменяются с помощью операций со стилями, (обычно) уже имеют существующие стили. Операции применяются к этим существующим стилям, если они присутствуют.

Модель оттенка, насыщенности и яркости

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

В стилизованных картах для обозначения цвета в операциях стилизации используется модель оттенка, насыщенности и яркости (HSL) . Оттенок обозначает основной цвет, насыщенность — интенсивность этого цвета, а яркость — относительное количество белого или черного в составляющем цвете.

Гамма-коррекция изменяет яркость в цветовом пространстве, как правило, для увеличения или уменьшения контраста. Кроме того, модель HSL определяет цвет в координатном пространстве, где hue указывает на ориентацию на цветовом круге, а насыщенность и яркость указывают на амплитуды вдоль различных осей. Оттенки измеряются в цветовом пространстве RGB, которое похоже на большинство цветовых пространств RGB, за исключением того, что в нем отсутствуют оттенки белого и черного.

Хотя hue принимает шестнадцатеричное значение цвета в формате HTML, он использует это значение только для определения основного цвета — то есть его положения на цветовом круге, а не насыщенности или яркости, которые указываются отдельно в виде процентных изменений.

Например, оттенок чистого зеленого можно задать как hue:0x00ff00 или hue:0x000100 . Оба оттенка идентичны. В цветовой модели HSL оба значения указывают на чистый зеленый цвет.

Цветовое колесо RGB

Значения hue RGB, состоящие из равных частей красного, зеленого и синего, не указывают на оттенок, поскольку ни одно из этих значений не указывает на ориентацию в координатном пространстве HSL. Примерами являются "#000000" (черный), "#FFFFFF" (белый) и все чистые оттенки серого. Чтобы обозначить черный, белый или серый цвет, необходимо удалить всю saturation (установить значение -100 ) и вместо этого отрегулировать lightness .

Кроме того, при изменении существующих элементов, уже имеющих цветовую схему, изменение таких значений, как hue не влияет на их существующую saturation или lightness .