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

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

От автора: не так давно в уроке по геокодированию, мы с Вами научились отображать на карте Google maps метку в соответствии с определенным заданным адресом. Но так как само по себе API вышеуказанного сервиса очень объемное и содержит множество различных элементов, я решил не останавливаться и продолжить развивать данную тему, тем более что в комментариях Вы писали об этом.

скачать исходники

Сегодня мы с Вами рассмотрим работу с маршрутами. То есть помимо простой метки – Вы можете на карте отобразить определенный заданный маршрут движения от одной точки к другой, чем мы собственно и займемся.

В данном уроке мы будем работать с все тем же тестовым сайтом, что и в уроке по геокодированию правда, с некоторыми доработками. Кстати, кто не смотрел данный урок – рекомендую просмотреть, потому, как на уже рассмотренных моментах я останавливаться не буду.

Условимся, что вместо пользователей – сайт будет отображать на экран добавленные задания, как будто это сервис по поиску и предоставлению работы. Причем направление работ – это курьерские доставки, а значит для каждой из них – обязательна, точна начала и точка пункта назначения, а так же могут быть заданы промежуточные пункты останова или посещения. При этом согласитесь, что очень удобно, когда данные точки будут распылаться на карте и между ними будет проложен маршрут. Вот как раз это мы с Вами сегодня и реализуем.

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

При этом в качестве адреса задания будет использоваться следующие данные.

Конечно, Вы можете спросить, а как данные адреса хранятся в базе данных? И ответ прост — адреса, содержащиеся в массиве, преобразуются в строку формата JSON и только тогда добавляются в базу данных. Как раз на первом скриншоте, в таблице видно JSON представление адреса для второго задания. На странице деталей выбранного задания, данные отображаются в следующем виде.

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

Обратите внимание, что в маршруте точка a – это начало движения, точка d – пункт назначения, а соответственно, b и с – промежуточные точки, которые курьер должен посетить. Теперь давайте займемся отображением карты на экран.

В файле users.php, который представляет собой шаблон отображения деталей выбранного задания, я сразу же подключил API от сервиса Google Maps:

Обратите внимание, что в качестве параметра mykey – необходимо передать Ваш сгенерированный ключ API Google (об этом мы подробно говорили на предыдущем уроке). Так же в учетной записи, потребуется подключить библиотеку Google Maps Directions Api.

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

Помимо ключа я передаю параметр callback и имя функции, которая будет вызвана на исполнение, после подключения библиотеки. Соответственно ее нам и нужно описать.

Первым делом в вышеуказанной функции, необходимо сформировать будущую карту и ее объект записать в переменную map. При создании объекта в функцию конструктор необходимо передать элемент, в который будет помещена карта (выборку которого осуществляем по идентификатору при помощи метода getElementById()).

Далее формируем два объекта необходимых нам сервисов – directionsDisplay и directionsService. Для расчета требуемого маршрута мы воспользуемся сервисом DirectionsService (документацию о нем можно почитать здесь) от компании Google. Используя, объект этого сервиса мы как бы получаем доступ к специальной службе маршрутов API Google Maps, которая получает запросы направления и возвращает вычисленные результаты. Соответственно для отображения результатов вычислений на экран мы обратимся к другому сервису под названием DirectionsRenderer.

Следовательно, далее необходимо сформировать специальный запрос, в ответ на который мы получим рассчитанный маршрут.

Запрос будет далее отправляться, используя метод route(), с параметрами, определенными в объекте request. В примере используются следующие свойства:

origin – пункт начала маршрута;

destination – пункт назначения;

waypoints – промежуточные точки маршрута;

travelMode – тип движения – в нашем случае на автомобиле.

Как Вы видите в коде выше, используется вывод на экран переменных языка PHP, и это не удивительно, так как данные были возвращены из базы данных.

Напомню, что адреса хранятся в строке формата JSON в следующем виде:

А значит, преобразуем строку в массив, с которым будет удобно работать (в переменной $user[‘address’] – содержится интересующая нас строка):

В этом случае результат будет выглядеть следующим образом:

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

Далее сформируем значения переменных, используемых для задания свойств объекта запроса.

Теперь, когда значения переменных определены, необходимо отправить запрос к сервису Google Maps и для этого вызовем на исполнение метод route(), объекта directionsService.

В качестве первого аргумента, передается объект запроса, а в качестве второго функция, которая будет вызвана на исполнение после получения ответа. В свою очередь функция принимает так же два параметра – объект ответа и статус отправленного запрос. Если запрос был выполнен успешно (то есть в статусе содержится строка “OK”) то, используя объект directionsDisplay, мы задаем, рассчитанные маршруты, и отображаем их на карте, используя метод setMap(). Теперь давайте посмотрим на результаты:

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

Как Вы видите, маршрут успешно отображается на экране, а значит, урок можно завершать. Всего Вам доброго и удачного кодирования!!!

Метки:

Похожие статьи:

Комментарии Вконтакте: