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

Автомобильный навигатор бесплатно на js

5 (100%) 3 vote[s]



Бесплатный вариант геолокации при помощи Open Street Map и Leaflet API мы уже рассматривали в нашей статье. Реализация задачи показать метку с расположением на карте или местонахождение по геолокации — дело простое. Достаточно подключить библиотеки, инициировать карту, задать координаты — и всё, готово. Но этот бесплатный API представляет много других полезных возможностей работы с картами, и одна из них — directions, или автомобильный навигатор (маршрут, расстояние между двумя пунктами).

Перейти к приложению, кликните по картинке:

автомобильный навигатор на js карта

Вот как автомобильный навигатор работает (в рамках нашей собственной реализации на jQuery):

Получить API KEY

Чтобы работать с API openrouteservice необходимо зарегистрироваться и сгенерировать бесплатный ключ. С ним будут доступны 4 вида функций. Нам как раз нужен Directions (о других вы можете получить информацию на сайте https://openrouteservice.org/).

Получение геокоординат

Чтобы сформировать маршрут, нам нужно получить геокоординаты начального и конечного пунктов. Для этого используем запрос geocode/search

https://api.openrouteservice.org/geocode/search?api_key=${YOUR_API_KEY}&text=$text=Country%20Sity'

В запросе связка страна+город используется для сужения поиска. Запрос можно видоизменять в зависимости от задач. Можно искать начальную и конечную точку внутри населенного пункта, дополнительно указывая улицу, номер дома (address) или штат/регион/область, почтовый индекс и т.д. Подробнее — https://github.com/pelias/documentation/blob/master/structured-geocoding.md#structured-geocoding.

Получение маршрута

Для получения точек маршрута используем запрос directions/driving-car

https://api.openrouteservice.org/v2/directions/driving-car?api_key=${YOUR_API_KEY}&start=lat,lon&end=lat,lon

Изображения карт получаем из Leaflet API.

Основные сложности заключаются в работе с получаемыми файлами JSON. Построить основной маршрут изначально не составляет труда. Единственно нужно придумать способ составления комбинированного запроса (страна+город), чтобы пользователю нужно было как меньше тратить время на ввод. Поэтому сделали вариант выбора страны (город уже вводится пользователем — причем регистр не играет роли).

Но в файле мы получаем ещё и steps — развернутое описание по отрезкам пути. Их мы тоже использовали. Для этого добавили отдельную карту сверху и поле input, в котором пользователь может перемещаться по пути последовательно по шагам (в любом направлении). Как всё это мы реализовали, можете посмотреть в исходном коде ниже. В нем мы изменили способ навигации по шагам (на видео в первом варианте шаги меняются в input) и добавили кнопки before-next.

Чтобы приложение заработало и у вас, в строке 180 нужно вставить свой API KEY.

Смотреть код:

Читайте больше по теме:

Подписаться
Уведомление о
guest
0 комментариев
Inline Feedbacks
View all comments
Просмотры: 418

Популярные записи