Отображение маршрута на карте

Отображение маршрутов в веб-картах базируется на взаимодействии клиентского API и серверного сервиса построения маршрутов. В рамках Google маршрутизация реализуется через компонент Directions API, интегрированный в JavaScript-обёртку карты.

Ключевые элементы системы маршрутизации:

  • DirectionsService — формирование запроса маршрута и получение геометрии пути
  • DirectionsRenderer — визуализация маршрута на карте
  • Map — контейнер отображения географической сцены
  • Result объект маршрута — структура данных с шагами, сегментами и альтернативами

Взаимодействие между компонентами строится по схеме:

  1. Формирование параметров маршрута
  2. Отправка запроса через DirectionsService
  3. Получение структурированного ответа
  4. Рендеринг результата на карте через DirectionsRenderer

DirectionsService как основа построения маршрута

DirectionsService выполняет запрос к серверной части маршрутизации и возвращает структурированный объект маршрута.

Основной метод:

  • route(request, callback)

Структура запроса включает:

  • origin — начальная точка
  • destination — конечная точка
  • waypoints — промежуточные точки
  • travelMode — тип передвижения
  • optimizeWaypoints — оптимизация маршрута
  • provideRouteAlternatives — альтернативные маршруты

Пример запроса

const directionsService = new google.maps.DirectionsService();

const request = {
  origin: "Almaty, Kazakhstan",
  destination: "Astana, Kazakhstan",
  travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, (result, status) => {
  if (status === "OK") {
    console.log(result);
  }
});

DirectionsRenderer и визуализация маршрута

DirectionsRenderer отвечает за отображение маршрута на карте, включая:

  • полилинию маршрута
  • маркеры начала и конца
  • текстовое описание шагов
  • альтернативные маршруты

Инициализация:

const directionsRenderer = new google.maps.DirectionsRenderer();
directionsRenderer.setMap(map);

Связка с результатом:

directionsRenderer.setDirections(result);

Инициализация карты для отображения маршрута

Отображение маршрута требует базового объекта карты:

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 7,
  center: { lat: 48.0196, lng: 66.9237 }
});

После инициализации карта связывается с DirectionsRenderer:

directionsRenderer.setMap(map);

Формирование параметров маршрута

Origin и Destination

Параметры могут задаваться:

  • строкой адреса
  • объектом LatLng
  • place_id
origin: { lat: 43.2220, lng: 76.8512 },
destination: { lat: 51.1694, lng: 71.4491 }

TravelMode

Поддерживаемые режимы:

  • DRIVING — автомобильный маршрут
  • WALKING — пеший маршрут
  • BICYCLING — велосипедный маршрут
  • TRANSIT — общественный транспорт
travelMode: google.maps.TravelMode.WALKING

Waypoints (промежуточные точки)

Позволяют строить сложные маршруты:

waypoints: [
  { location: "Karaganda", stopover: true },
  { location: "Temirtau", stopover: true }
]

Оптимизация маршрута

Параметр:

optimizeWaypoints: true

Автоматически перестраивает порядок промежуточных точек для минимизации расстояния.

Структура результата маршрута

Ответ DirectionsService содержит:

routes

Массив маршрутов, включая альтернативные пути.

Каждый маршрут включает:

  • legs — сегменты между точками
  • overview_path — упрощённая геометрия
  • bounds — географические границы

legs

Сегменты маршрута содержат:

  • distance — расстояние
  • duration — время в пути
  • start_location / end_location
  • steps — детальные инструкции

steps

Наиболее детализированный уровень:

  • текстовые инструкции
  • полилиния сегмента
  • манёвры (turn left, turn right)

Отображение полилинии маршрута

Внутренне DirectionsRenderer использует Polyline, но возможно ручное управление.

Кастомная отрисовка

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

const polyline = new google.maps.Polyline({
  path: routePath,
  strokeColor: "#3367D6",
  strokeOpacity: 1.0,
  strokeWeight: 4
});

polyline.setMap(map);

Кастомизация отображения маршрута

DirectionsRenderer поддерживает стилизацию:

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

Параметры кастомизации:

  • suppressMarkers — отключение стандартных маркеров
  • suppressPolylines — отключение линии маршрута
  • draggable — возможность перетаскивания маршрута

Альтернативные маршруты

Включение альтернатив:

provideRouteAlternatives: true

В результате возвращается несколько вариантов маршрута с разными характеристиками:

  • быстрее
  • короче
  • менее загруженный трафик

Обработка статусов ответа

Основные статусы:

  • OK — маршрут построен успешно
  • NOT_FOUND — не найдена точка
  • ZERO_RESULTS — маршрут невозможен
  • MAX_WAYPOINTS_EXCEEDED — превышено число точек
  • OVER_QUERY_LIMIT — превышен лимит запросов
if (status !== "OK") {
  console.error("Ошибка маршрута:", status);
}

Полный пример построения маршрута

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 6,
  center: { lat: 49.8, lng: 73.1 }
});

const directionsService = new google.maps.DirectionsService();
const directionsRenderer = new google.maps.DirectionsRenderer({
  polylineOptions: {
    strokeColor: "#1A73E8",
    strokeWeight: 5
  }
});

directionsRenderer.setMap(map);

const request = {
  origin: "Karaganda, Kazakhstan",
  destination: "Almaty, Kazakhstan",
  waypoints: [
    { location: "Balkhash", stopover: true }
  ],
  optimizeWaypoints: true,
  travelMode: google.maps.TravelMode.DRIVING
};

directionsService.route(request, (result, status) => {
  if (status === "OK") {
    directionsRenderer.setDirections(result);
  }
});

Детальная работа с шагами маршрута

Каждый шаг маршрута содержит геометрию и инструкции, которые используются для:

  • построения навигационных подсказок
  • анализа маршрута
  • визуализации отдельных сегментов
const steps = result.routes[0].legs[0].steps;

steps.forEach(step => {
  console.log(step.instructions);
});

Динамическое обновление маршрута

При изменении параметров маршрута выполняется повторный запрос:

  • изменение точки назначения
  • добавление промежуточных узлов
  • смена типа транспорта
directionsService.route(updatedRequest, callback);

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

Оптимизация производительности

При работе с маршрутизацией учитываются:

  • количество запросов к API
  • частота обновления маршрута
  • кэширование результатов
  • ограничение waypoints

Рекомендуется минимизировать:

  • повторные идентичные запросы
  • избыточные промежуточные точки
  • частые перерисовки карты

Геометрия маршрута и координатная модель

Маршрут в ответе представлен в виде набора точек LatLng. Для упрощённого рендеринга используется:

  • overview_path — сглаженная линия
  • detailed steps — точная траектория

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

Оглавление