Многие компании сталкиваются с необходимостью создания кастомных навигационных решений, ведь качественно реализованная карта может стать ключевым конкурентным преимуществом — особенно для логистических сервисов, служб доставки и транспортных приложений.
В этой статье мы расскажем, как использовать Google Maps для создания удобного навигатора, и поделимся практическими советами по работе с картами во Flutter.
Задача
Стоит такая задача: нам известна конечная точка маршрута, надо до неё проложить маршрут, с ведением водителя по маршруту в реальном времени, внизу экрана отображается оставшееся время в пути и дистанция до конечной точки, вверху экрана отображаются подсказки по направлению движения.
Нам потребуется:
Реализация
Первым делом подключаем сами карты, делаем всё по документации. Пакет google_maps_flutter (https://pub.dev/packages/google_maps_flutter).
Далее нам нужно получить стрим координат пользователя, импортируем geolocator (https://pub.dev/packages/geolocator).
Для получения координат надо запросить разрешение на использование геопозиции, используем метод Geolocator.requestPermission. Теперь можно использовать метод Geolocator.getPositionStream для получения стрима координат.
При получении новых координат, старые сохраняем в oldCoordinates.
Конечная точка нам известна, поэтому мы её сразу добавляем в markers при помощи класса Marker().
Теперь нам надо создать функцию, которая при получении координат из стрима будет делать следующие вещи:
- Отрисовывать маршрут
- Получать направления движения
- Получать/обновлять оставшееся время и дистанцию
- Добавлять/обновлять маркер водителя
- Перемещать камеру
1. Отрисовка маршрута
Для отрисовки маршрута используем метод DirectionsService.route(), передаём в него две LatLng точки: координаты водителя и координаты финальной точки и получаем лист LatLng точек. Добавляем полилайн в polylines при помощи класса Polyline(), в который передаём полученные LatLng точки из DirectionsService.route(). При получении координат из стрима обновляем этот полилайн.
2. Получение направлений движения
Для получения направлений движения используем directions api (https://developers.google.com/maps/documentation/directions/overview). Делаем всё по документации и добавляем полученные данные в directions. При получении координат из стрима обновляем этот список. Что бы отобразить направления движения импортируем flutter_html (https://pub.dev/packages/flutter_html) и при помощи класса Html() отображаем данные.
3. Расчёт времени и дистанции
Для получения оставшегося времени в пути и дистанции используем distance matrix api (https://developers.google.com/maps/documentation/distance-matrix/overview). Так же всё делаем по документации и сохраняем полученные данные в time и distance. При получении координат из стрима обновляем эти данные.
4. Управление маркером водителя
Для точки водителя добавляем маркер в markers при помощи класса Marker(). Но при получении новых координат из стрима анимируем его передвижение от координат oldCoordinates до полученных координат из стрима.
5. Управление камерой
Для перемещения камеры создаём controller - googleMapsController.future и используем метод controller.animateCamera() в который передаём координаты из стрима.
Заключение
В результате мы получили простой навигатор с базовым функционалом: построением маршрута, отслеживанием позиции, расчётом времени и расстояния, а также анимацией движения по карте.
Это стартовая основа, которую можно развивать дальше — добавлять голосовые подсказки, офлайн-режим, оптимизацию маршрутов или интеграцию с системами.
Подобные решения мы регулярно внедряем для наших клиентов из сферы логистики и доставки. Благодаря опыту работы с геосервисами и Flutter мы можем быстро подстроить базовое решение под конкретные задачи бизнеса.
