Стилизация линии маршрута

Работа с маршрутом в Google Maps Platform JavaScript API опирается на объект полилинии (Polyline), который позволяет гибко управлять визуальным представлением линии на карте. Стилизация маршрута сводится к конфигурации объекта PolylineOptions, а также к динамическому изменению свойств уже созданной линии.

Основной способ отображения маршрута — использование класса google.maps.Polyline. Он принимает объект настроек, в котором определяются цвет, толщина и прозрачность линии.

const routePath = new google.maps.Polyline({
  path: [
    { lat: 51.5, lng: 0.12 },
    { lat: 51.51, lng: 0.13 },
    { lat: 51.52, lng: 0.14 }
  ],
  geodesic: true,
  strokeColor: "#1a73e8",
  strokeOpacity: 1.0,
  strokeWeight: 4
});

routePath.setMap(map);

Ключевые параметры Polyline

  • strokeColor — задаёт цвет линии в формате HEX, RGB или именованном цвете
  • strokeOpacity — прозрачность линии (0.0–1.0)
  • strokeWeight — толщина линии в пикселях
  • geodesic — включает геодезическую интерполяцию (кривая на сфере)

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

Стилизация маршрута через DirectionsRenderer

При построении маршрутов через DirectionsService визуализация обычно управляется DirectionsRenderer. Он позволяет централизованно задавать стиль всей линии маршрута через polylineOptions.

const directionsRenderer = new google.maps.DirectionsRenderer({
  polylineOptions: {
    strokeColor: "#ff5722",
    strokeOpacity: 0.8,
    strokeWeight: 6
  },
  suppressPolylines: false
});

directionsRenderer.setMap(map);

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

Сегментированная стилизация маршрута

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

const segment1 = new google.maps.Polyline({
  path: pathPart1,
  strokeColor: "#4caf50",
  strokeWeight: 5
});

const segment2 = new google.maps.Polyline({
  path: pathPart2,
  strokeColor: "#ff9800",
  strokeWeight: 5
});

segment1.setMap(map);
segment2.setMap(map);

Такой подход используется для:

  • выделения этапов маршрута
  • отображения прогресса движения
  • визуального разделения типов дорог

Использование символов и пунктирных линий

Polyline поддерживает кастомные символы через свойство icons. Это позволяет создавать пунктирные линии, стрелки направления и анимированные эффекты.

Пунктирная линия

const dashedLine = new google.maps.Polyline({
  path: routePathData,
  strokeOpacity: 0,
  icons: [{
    icon: {
      path: "M 0,-1 0,1",
      strokeOpacity: 1,
      scale: 4
    },
    repeat: "20px"
  }]
});

dashedLine.setMap(map);

Здесь основной цвет линии отключается, а визуализация достигается через повторяющийся символ.

Стрелки направления

const arrowSymbol = {
  path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
  scale: 3,
  strokeColor: "#1976d2"
};

const arrowLine = new google.maps.Polyline({
  path: routePathData,
  strokeColor: "#1976d2",
  strokeWeight: 4,
  icons: [{
    icon: arrowSymbol,
    offset: "100%"
  }]
});

Стрелки помогают визуально определить направление движения по маршруту.

Анимация маршрута

Анимация достигается через смещение символов вдоль линии с использованием setInterval или requestAnimationFrame.

let count = 0;

window.setInterval(() => {
  count = (count + 1) % 200;

  const icons = [{
    icon: arrowSymbol,
    offset: count / 2 + "%"
  }];

  arrowLine.set("icons", icons);
}, 50);

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

Градиентная стилизация

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

function interpolateColor(color1, color2, factor) {
  return `rgb(
    ${Math.round(color1.r + factor * (color2.r - color1.r))},
    ${Math.round(color1.g + factor * (color2.g - color1.g))},
    ${Math.round(color1.b + factor * (color2.b - color1.b))}
  )`;
}

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

Управление слоями и приоритетом отображения

При наложении нескольких маршрутов используется zIndex, который управляет порядком отрисовки.

const mainRoute = new google.maps.Polyline({
  path: mainPath,
  strokeColor: "#0000ff",
  strokeWeight: 6,
  zIndex: 2
});

const alternativeRoute = new google.maps.Polyline({
  path: altPath,
  strokeColor: "#999999",
  strokeWeight: 4,
  zIndex: 1
});

Маршрут с более высоким zIndex всегда будет визуально доминировать.

Адаптация под масштаб карты

Толщина линии часто требует динамической корректировки при изменении масштаба карты. Это достигается через обработчик zoom_changed.

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

  routePath.setOptions({
    strokeWeight: zoom > 12 ? 6 : 3
  });
});

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

SVG-подобные символы для сложной стилизации

Polyline поддерживает кастомные SVG path-формы через Symbol.

const customSymbol = {
  path: "M 0,-2 0,2",
  strokeColor: "#e91e63",
  strokeWeight: 2
};

const customLine = new google.maps.Polyline({
  path: routePathData,
  icons: [{
    icon: customSymbol,
    offset: "0",
    repeat: "10px"
  }],
  strokeOpacity: 0
});

Это позволяет создавать уникальные визуальные стили, недостижимые стандартными параметрами линии.

Производительность при сложных маршрутах

При большом количестве координат критично учитывать производительность рендеринга:

  • использование упрощённых геометрий (Douglas-Peucker simplification)
  • минимизация количества сегментов Polyline
  • отключение лишних обновлений через setOptions
  • повторное использование объектов MVCArray
const pathArray = new google.maps.MVCArray(routeCoordinates);

const optimizedLine = new google.maps.Polyline({
  path: pathArray,
  strokeColor: "#3f51b5",
  strokeWeight: 4
});

MVCArray обеспечивает эффективное обновление без полной перерисовки слоя.

Интеграция стилизации с DirectionsService

При работе с API маршрутов часто требуется переопределение стандартного отображения:

const directionsRenderer = new google.maps.DirectionsRenderer({
  suppressPolylines: true
});

После отключения стандартной линии создаётся собственная Polyline на основе результата DirectionsService, что даёт полный контроль над стилем:

const route = result.routes[0].overview_path;

const customRouteLine = new google.maps.Polyline({
  path: route,
  strokeColor: "#00bcd4",
  strokeWeight: 5,
  strokeOpacity: 0.9
});

customRouteLine.setMap(map);
Оглавление