Прозрачность и видимость оверлеев

Оверлеи в Google Maps JavaScript API позволяют отображать поверх карты дополнительные визуальные элементы: маркеры, полигоны, полилинии, окружности, прямоугольники, пользовательские изображения и собственные HTML-компоненты. Управление прозрачностью и видимостью является важной частью разработки интерактивных картографических интерфейсов, поскольку влияет на читаемость карты, восприятие данных и производительность приложения.

Основными механизмами управления отображением являются:

настройка прозрачности через свойство opacity;
полное скрытие объекта через удаление с карты;
временное отключение отображения без удаления данных;
управление прозрачностью отдельных частей объекта;
динамическое изменение прозрачности в ответ на действия пользователя.

Прозрачность маркеров

Для маркеров используется свойство opacity, принимающее значения от 0 до 1.

const marker = new google.maps.Marker({
    position: { lat: 55.751244, lng: 37.618423 },
    map: map,
    opacity: 0.5
});

Значения интерпретируются следующим образом:

Значение	Результат
0	Полностью прозрачный
0.25	Сильно прозрачный
0.5	Полупрозрачный
0.75	Почти непрозрачный
1	Полностью видимый

Изменение прозрачности после создания:

marker.setOpacity(0.3);

Получение текущего значения:

const opacity = marker.getOpacity();
console.log(opacity);

Динамическое изменение прозрачности маркеров

Часто требуется визуально выделять активный объект и затемнять остальные.

markers.forEach(marker => {
    marker.setOpacity(0.3);
});

selectedMarker.setOpacity(1);

Подобный подход применяется для:

отображения результатов поиска;
выделения выбранного объекта;
фильтрации категорий данных;
показа состояния активности элементов.

Прозрачность пользовательских иконок

Если используется собственное изображение маркера, прозрачность задаётся двумя способами.

Через свойство opacity

const marker = new google.maps.Marker({
    position: position,
    map: map,
    icon: "marker.png",
    opacity: 0.6
});

Через PNG с альфа-каналом

Файл изображения может содержать встроенную прозрачность.

Например:

прозрачный фон;
полупрозрачные тени;
плавные края объектов.

В этом случае итоговая прозрачность формируется как комбинация прозрачности изображения и свойства opacity.

Прозрачность полилиний

Полилинии поддерживают настройку прозрачности цвета линии через параметр strokeOpacity.

const route = new google.maps.Polyline({
    path: coordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 0.5,
    strokeWeight: 4,
    map: map
});

Основные параметры:

strokeColor
strokeOpacity
strokeWeight

Пример почти прозрачной линии:

route.setOptions({
    strokeOpacity: 0.15
});

Такой подход полезен для отображения:

второстепенных маршрутов;
исторических треков;
вспомогательных линий;
прогнозируемых траекторий.

Прозрачность полигонов

Полигоны имеют два независимых параметра прозрачности:

контура;
внутренней заливки.

const polygon = new google.maps.Polygon({
    paths: coordinates,
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#0000FF",
    fillOpacity: 0.35,
    map: map
});

Здесь:

strokeOpacity отвечает за прозрачность границы;
fillOpacity отвечает за прозрачность внутренней области.

Независимое управление границей и заливкой

Часто необходимо сделать контур заметным, а заливку ненавязчивой.

const polygon = new google.maps.Polygon({
    paths: zone,
    strokeColor: "#00AAFF",
    strokeOpacity: 1,
    strokeWeight: 3,
    fillColor: "#00AAFF",
    fillOpacity: 0.1,
    map: map
});

Результат:

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

Прозрачность окружностей

Окружности используют те же параметры, что и полигоны.

const circle = new google.maps.Circle({
    center: centerPoint,
    radius: 1000,
    strokeColor: "#008000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#008000",
    fillOpacity: 0.2,
    map: map
});

Изменение прозрачности во время работы:

circle.setOptions({
    fillOpacity: 0.6
});

Прозрачность прямоугольников

Для прямоугольников применяются аналогичные настройки.

const rectangle = new google.maps.Rectangle({
    bounds: bounds,
    strokeColor: "#FF6600",
    strokeOpacity: 0.9,
    strokeWeight: 2,
    fillColor: "#FF6600",
    fillOpacity: 0.25,
    map: map
});

Полезно при отображении:

зон мониторинга;
выделенных регионов;
областей поиска;
координатных сеток.

Полное скрытие оверлея

Иногда требуется не уменьшить прозрачность, а полностью скрыть объект.

Большинство оверлеев используют метод:

overlay.setMap(null);

Например:

marker.setMap(null);

или

polygon.setMap(null);

После выполнения объект перестаёт отображаться на карте.

Возврат скрытого объекта

Для повторного отображения необходимо снова привязать объект к карте.

marker.setMap(map);

или

polygon.setMap(map);

При этом:

координаты сохраняются;
настройки сохраняются;
события продолжают работать.

Переключение видимости через кнопку

Типичный сценарий — отображение и скрытие набора объектов.

let visible = true;

button.addEventListener("click", () => {
    visible = !visible;

    markers.forEach(marker => {
        marker.setMap(visible ? map : null);
    });
});

Подобная техника лежит в основе:

слоёв карты;
фильтров;
панели категорий;
переключателей данных.

Управление группами оверлеев

Для крупных проектов объекты обычно хранятся в массивах.

const restaurants = [];
const hotels = [];
const parks = [];

Скрытие целой группы:

restaurants.forEach(marker => {
    marker.setMap(null);
});

Показ группы:

restaurants.forEach(marker => {
    marker.setMap(map);
});

Такой подход позволяет строить полноценную систему слоёв.

Использование CSS-прозрачности в OverlayView

Пользовательские оверлеи, созданные через OverlayView, позволяют применять стандартные CSS-свойства.

div.style.opacity = "0.5";

Изменение прозрачности:

div.style.opacity = "0.2";

Полная видимость:

div.style.opacity = "1";

Поскольку используется HTML-элемент, доступны все возможности CSS-анимации.

Плавное появление оверлея

.custom-overlay {
    opacity: 0;
    transition: opacity 0.4s ease;
}

После отображения:

element.style.opacity = "1";

Получается эффект плавного появления объекта поверх карты.

Плавное исчезновение

element.style.opacity = "0";

После завершения анимации:

setTimeout(() => {
    overlay.setMap(null);
}, 400);

Такой механизм выглядит значительно лучше мгновенного удаления.

Управление прозрачностью при наведении

Для повышения интерактивности можно изменять прозрачность объекта во время наведения курсора.

Пример для полигона:

polygon.addListener("mouseover", () => {
    polygon.setOptions({
        fillOpacity: 0.6
    });
});

polygon.addListener("mouseout", () => {
    polygon.setOptions({
        fillOpacity: 0.2
    });
});

Эффект визуально подчёркивает выбранную область.

Выделение активного объекта

Распространённый интерфейсный приём — приглушение остальных объектов.

markers.forEach(marker => {
    marker.setOpacity(0.2);
});

activeMarker.setOpacity(1);

Преимущества:

фокусировка внимания;
снижение визуального шума;
улучшение восприятия больших наборов данных.

Видимость через масштаб карты

Событие изменения масштаба позволяет показывать и скрывать оверлеи автоматически.

map.addListener("zoom_changed", () => {
    const zoom = map.getZoom();

    if (zoom < 10) {
        polygon.setMap(null);
    } else {
        polygon.setMap(map);
    }
});

Подход особенно полезен для:

детализированных объектов;
районов городов;
инфраструктурных элементов;
тысяч мелких маркеров.

Комбинирование прозрачности и масштабирования

Вместо полного скрытия возможно постепенное изменение прозрачности.

map.addListener("zoom_changed", () => {
    const zoom = map.getZoom();

    const opacity = Math.min(1, zoom / 15);

    polygon.setOptions({
        fillOpacity: opacity * 0.4
    });
});

Визуальный переход становится значительно мягче.

Влияние прозрачности на производительность

Свойство прозрачности почти не влияет на производительность при небольшом количестве объектов.

Однако при работе с:

тысячами полигонов;
тысячами пользовательских DOM-оверлеев;
крупными геоданными;

следует учитывать дополнительные затраты браузера на отрисовку полупрозрачных элементов.

Для оптимизации рекомендуется:

скрывать неиспользуемые объекты через setMap(null);
уменьшать количество одновременно видимых оверлеев;
использовать кластеризацию маркеров;
применять масштабно-зависимую загрузку данных.

Типичные ошибки

Попытка скрыть объект через opacity = 0

marker.setOpacity(0);

Объект становится невидимым, но продолжает существовать на карте и участвовать в обработке событий.

Если требуется действительно убрать объект, следует использовать:

marker.setMap(null);

Использование прозрачной заливки без прозрачного контура

fillOpacity: 0.05,
strokeOpacity: 1

В результате контур может выглядеть слишком агрессивно по отношению к почти незаметной области.

Необходимо подбирать значения совместно.

Слишком низкая прозрачность

fillOpacity: 0.02

Подобные значения часто делают объект практически невидимым на светлых картах.

Практически полезный диапазон:

0.15 - 0.45

для большинства заливок.

Тип объекта	Рекомендуемое значение
Маркер в фоне	0.3–0.6
Активный маркер	1
Полигон зоны	0.15–0.35
Полигон выделения	0.4–0.6
Окружность радиуса действия	0.15–0.3
Второстепенный маршрут	0.2–0.5
Основной маршрут	0.8–1
Пользовательский OverlayView	0.7–1