Настройте представление стандартной карты Google, применив собственные стили при использовании Maps Static API. Вы можете изменить визуальное отображение таких объектов, как дороги, парки, застроенные территории и другие достопримечательности. Измените их цвет или стиль, чтобы подчеркнуть определенный контент, дополнить окружающий контент на странице или даже полностью скрыть функции.
Примеры
В следующем примере показана карта Бруклина, США, со стилем, в котором местные дороги окрашены в ярко-зеленый цвет, а жилые районы - в черный. Он также инвертирует яркость надписей, чтобы они лучше выделялись на темном фоне. Обратите внимание, что в этом рабочем примере используется кодировка URL:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15¢er=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
![Стилизованная карта Бруклина.](https://developers.google.cn/static/maps/documentation/maps-static/images/brooklyn-map.png?authuser=1&hl=ru)
В следующем примере используются операции стилизации и упрощения, чтобы приблизиться к внешнему виду атласа дорог США:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12¢er=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
![Стиль карты Атласа дорог США.](https://developers.google.cn/static/maps/documentation/maps-static/images/us-road-atlas-map.png?authuser=1&hl=ru)
Синтаксис стиля
Чтобы создать карту с индивидуальным стилем, включите в URL-адрес запроса один или несколько параметров style
.
Каждое объявление style
может содержать следующие аргументы, разделенные вертикальной чертой (" |
"):
-
feature
(необязательно) указывает функции, которые следует выбрать для этой модификации стиля. К объектам относятся объекты на карте, например дороги, парки и другие достопримечательности. Если аргументfeature
отсутствует, указанный стиль применяется ко всем объектам. -
element
(необязательный) указывает элемент(ы) указанного объекта, который нужно выбрать для этой модификации стиля. Элементы — это характеристики объекта, например геометрии или меток. Если аргументelement
отсутствует, стиль применяется ко всем элементам указанного объекта. - Набор правил стиля (обязательных), применяемых к указанным функциям и элементам. API применяет правила в том порядке, в котором они указаны в объявлении
style
. Вы можете включить любое количество правил в рамках обычных ограничений длины URL-адресов Maps Static API.
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument
Функции
Следующее объявление style
раскрашивает все дороги на карте:
style=feature:road|color:0xffffff
Вот некоторые общие функции:
-
feature:all
(по умолчанию) выбирает все объекты карты. -
feature:road
выбирает все дороги на карте. -
feature:road.local
выбирает все местные дороги.
Объекты или типы объектов — это географические характеристики на карте, включая дороги, парки, водоемы, предприятия и т. д.
Объекты образуют дерево категорий, корнем которого являются 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
выбирает водоемы.
Элементы
Следующее объявление style
окрашивает метки для всех местных дорог:
style=feature:road.local|element:labels|color:0xffffff
Элементы — это подразделения объекта. Дорога, например, состоит из графической линии (геометрии) на карте, а также текста, обозначающего ее название (метки).
Доступны следующие элементы, но учтите, что конкретная функция может поддерживать ни один, некоторые или все элементы:
-
all
(по умолчанию) выбирает все элементы указанного объекта. -
geometry
выбирает все геометрические элементы указанного объекта.-
geometry.fill
выбирает только заливку геометрии объекта. -
geometry.stroke
выбирает только обводку геометрии объекта.
-
-
labels
выбирает текстовые метки, связанные с указанным объектом.-
labels.icon
выбирает только значок, отображаемый внутри метки объекта. -
labels.text
выбирает только текст метки. -
labels.text.fill
выбирает только заливку метки. Заливка метки обычно отображается в виде цветного контура, окружающего текст метки. -
labels.text.stroke
выбирает только обводку текста метки.
-
Правила стиля
Правила стиля — это параметры форматирования, которые применяются к функциям и элементам, указанным в каждом объявлении style
.
Следующее объявление style
применяет к дорогам на карте два правила стиля. Первое правило применяет цвет к дорогам. Второе правило упрощает отображение дорог, поэтому они имеют более тонкие линии без контуров:
style=feature:road|color:0xffffff|visibility:simplified
Каждое объявление style
должно содержать одну или несколько операций, разделенных символом вертикальной черты (« |
»). Каждая операция указывает значение своего аргумента с помощью символа двоеточия (« :
»), и все операции применяются к выборке в том порядке, в котором вы их указали.
Поддерживаются следующие параметры стиля:
-
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
.