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

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

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

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

$arr = array(
 
  'a' => 'Киев:Митрополита Василия Липковского, д.23',
  'b' => 'Киев:Крещатик,д.26',
  'c' => 'Киев:Ивана Кудри, д. 39',
  'd' => 'Киев:Садовая, д.22'

  );

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

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

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

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

<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=mykey&amp;callback=initMap">
 </script>

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

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

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

function initMap() {
  var map = new google.maps.Map(document.getElementById('map_canvas'), {
 scrollwheel:false
  });
 
  var directionsDisplay = new google.maps.DirectionsRenderer();
  var directionsService = new google.maps.DirectionsService();
 
 }

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

var request = {
 origin:'<?php echo $origin;?>',
 destination:'<?php echo $destination;?>',
 waypoints:<?php echo $waypoints;?>,
 travelMode:google.maps.TravelMode.DRIVING
  };

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

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

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

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

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

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

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

{"a":"Киев:Митрополита Василия Липковского, д.23","b":"Киев:Крещатик,д.26","c":"Киев:Ивана Кудри, д. 39","d":"Киев:Садовая, д.22"}

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

$address = (array)json_decode($user['address']);
 
  $address = array_map(function($item) {
 $row = explode(':',$item);
 return $row;
  }, $address);

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

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

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

$origin = '';
 $destination = '';
 $waypoints = "[";
 
 $i = 0;
 $count_addr = count($address);
 
 foreach($address as $k=>$item) {
 if($k == 'a') {
 $origin = $item[0].", ".$item[1];
 }
 elseif($i == ($count_addr - 1)) {
 $destination = $item[0].", ".$item[1];
 }
 else {
 $waypoints .= '{';
 $waypoints .= 'location:"'.$item[0].', '.$item[1].'", stopover:false';
 $waypoints .= '}';
 
 if($i !== ($count_addr - 2)) {
 $waypoints .= ',';
 }
 }
 $i++;
 }
 
 $waypoints .= "]";

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

directionsService.route(request, function(response,status) {
 console.log(response);
 console.log(status);
 
 if(status == google.maps.DirectionsStatus.OK) {
 directionsDisplay.setDirections(response);
 }
  });

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree