Наши статьи

Делаем простой навигатор с помощью Google Maps на Flutter своими руками

2024-04-01 15:58 Разработка Flutter

Привет, на связи PurplePlane. Хотим показать простой пример реализации навигации в приложении с помощью Google карт.

Google по каким-то неведомым причинам решил не делать нормальный пакет карт для Flutter, но ничего страшного, давайте это исправлять.
Стоит такая задача: нам известна конечная точка маршрута, надо до неё проложить маршрут, с ведением водителя по маршруту в реальном времени, внизу экрана отображается оставшееся время в пути и дистанция до конечной точки, вверху экрана отображаются подсказки по направлению движения.
Нам потребуется:

Ну что же, приступим.

Создаем несколько переменных:
  • markers - Маркеры Set<Marker>
  • polylines - Полилайны Set<Polyline>
  • time - Время до конечной точки String
  • distance - Дистанция до конечной точки String
  • directions - Направления движения List
  • oldCoordinates - Старые координаты LatLng (для анимирования передвижения маркера водителя)
Первым делом подключаем сами карты, делаем всё по документации. Пакет google_maps_flutter (https://pub.dev/packages/google_maps_flutter).
Далее нам нужно получить стрим координат пользователя, импортируем geolocator (https://pub.dev/packages/geolocator).
Для получения координат надо запросить разрешение на использование геопозиции, используем метод Geolocator.requestPermission.Теперь можно использовать метод Geolocator.getPositionStream для получения стрима координат.
При получении новых координат, старые сохраняем в oldCoordinates.
Конечная точка нам известна, поэтому мы её сразу добавляем в markers при помощи класса Marker().
Теперь нам надо создать функцию, которая при получении координат из стрима будет делать следующие вещи:
1. Отрисовывать маршрут
2. Получать направления движения
3. Получать/обновлять оставшееся время и дистанцию
4. Добавлять/обновлять маркер водителя
5. Перемещать камеру
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() в который передаём координаты из стрима.
Ну вот и всё, простенький навигатор готов. Ui делайте по своему вкусу.

Примеры результата: