Тендеры и лиды
Информация
Многие компании сталкиваются с необходимостью создания кастомных навигационных решений, ведь качественно реализованная карта может стать ключевым конкурентным преимуществом — особенно для логистических сервисов, служб доставки и транспортных приложений.
В этой статье мы расскажем, как использовать 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().
Теперь нам надо создать функцию, которая при получении координат из стрима будет делать следующие вещи:
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13203 тендера
проведено за восемь лет работы нашего сайта.
Для отрисовки маршрута используем метод DirectionsService.route(), передаём в него две LatLng точки: координаты водителя и координаты финальной точки и получаем лист LatLng точек. Добавляем полилайн в polylines при помощи класса Polyline(), в который передаём полученные LatLng точки из DirectionsService.route(). При получении координат из стрима обновляем этот полилайн.
Для получения направлений движения используем directions api (https://developers.google.com/maps/documentation/directions/overview). Делаем всё по документации и добавляем полученные данные в directions. При получении координат из стрима обновляем этот список. Что бы отобразить направления движения импортируем flutter_html (https://pub.dev/packages/flutter_html) и при помощи класса Html() отображаем данные.
Для получения оставшегося времени в пути и дистанции используем distance matrix api (https://developers.google.com/maps/documentation/distance-matrix/overview). Так же всё делаем по документации и сохраняем полученные данные в time и distance. При получении координат из стрима обновляем эти данные.
Для точки водителя добавляем маркер в markers при помощи класса Marker(). Но при получении новых координат из стрима анимируем его передвижение от координат oldCoordinates до полученных координат из стрима.
Для перемещения камеры создаём controller - googleMapsController.future и используем метод controller.animateCamera() в который передаём координаты из стрима.
В результате мы получили простой навигатор с базовым функционалом: построением маршрута, отслеживанием позиции, расчётом времени и расстояния, а также анимацией движения по карте.
Это стартовая основа, которую можно развивать дальше — добавлять голосовые подсказки, офлайн-режим, оптимизацию маршрутов или интеграцию с системами.
Подобные решения мы регулярно внедряем для наших клиентов из сферы логистики и доставки. Благодаря опыту работы с геосервисами и Flutter мы можем быстро подстроить базовое решение под конкретные задачи бизнеса.
