От автора: не так давно в уроке по геокодированию, мы с Вами научились отображать на карте Google maps метку в соответствии с определенным заданным адресом. Но так как само по себе API вышеуказанного сервиса очень объемное и содержит множество различных элементов, я решил не останавливаться и продолжить развивать данную тему, тем более что в комментариях Вы писали об этом.
Сегодня мы с Вами рассмотрим работу с маршрутами. То есть помимо простой метки – Вы можете на карте отобразить определенный заданный маршрут движения от одной точки к другой, чем мы собственно и займемся.
В данном уроке мы будем работать с все тем же тестовым сайтом, что и в уроке по геокодированию правда, с некоторыми доработками. Кстати, кто не смотрел данный урок – рекомендую просмотреть, потому, как на уже рассмотренных моментах я останавливаться не буду.
Условимся, что вместо пользователей – сайт будет отображать на экран добавленные задания, как будто это сервис по поиску и предоставлению работы. Причем направление работ – это курьерские доставки, а значит для каждой из них – обязательна, точна начала и точка пункта назначения, а так же могут быть заданы промежуточные пункты останова или посещения. При этом согласитесь, что очень удобно, когда данные точки будут распылаться на карте и между ними будет проложен маршрут. Вот как раз это мы с Вами сегодня и реализуем.
При этом в качестве адреса задания будет использоваться следующие данные.
1 2 3 4 5 6 7 8 |
$arr = array( 'a' => 'Киев:Митрополита Василия Липковского, д.23', 'b' => 'Киев:Крещатик,д.26', 'c' => 'Киев:Ивана Кудри, д. 39', 'd' => 'Киев:Садовая, д.22' ); |
Конечно, Вы можете спросить, а как данные адреса хранятся в базе данных? И ответ прост — адреса, содержащиеся в массиве, преобразуются в строку формата JSON и только тогда добавляются в базу данных. Как раз на первом скриншоте, в таблице видно JSON представление адреса для второго задания. На странице деталей выбранного задания, данные отображаются в следующем виде.
Обратите внимание, что в маршруте точка a – это начало движения, точка d – пункт назначения, а соответственно, b и с – промежуточные точки, которые курьер должен посетить. Теперь давайте займемся отображением карты на экран.
В файле users.php, который представляет собой шаблон отображения деталей выбранного задания, я сразу же подключил API от сервиса Google Maps:
1 2 |
<script async="" defer="" src="//maps.googleapis.com/maps/api/js?key=mykey&callback=initMap"> </script> |
Обратите внимание, что в качестве параметра mykey – необходимо передать Ваш сгенерированный ключ API Google (об этом мы подробно говорили на предыдущем уроке). Так же в учетной записи, потребуется подключить библиотеку Google Maps Directions Api.
Помимо ключа я передаю параметр callback и имя функции, которая будет вызвана на исполнение, после подключения библиотеки. Соответственно ее нам и нужно описать.
1 2 3 4 5 6 7 8 9 |
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.
Следовательно, далее необходимо сформировать специальный запрос, в ответ на который мы получим рассчитанный маршрут.
1 2 3 4 5 6 |
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 в следующем виде:
1 |
{"a":"Киев:Митрополита Василия Липковского, д.23","b":"Киев:Крещатик,д.26","c":"Киев:Ивана Кудри, д. 39","d":"Киев:Садовая, д.22"} |
А значит, преобразуем строку в массив, с которым будет удобно работать (в переменной $user[‘address’] – содержится интересующая нас строка):
1 2 3 4 5 6 |
$address = (array)json_decode($user['address']); $address = array_map(function($item) { $row = explode(':',$item); return $row; }, $address); |
В этом случае результат будет выглядеть следующим образом:
Далее сформируем значения переменных, используемых для задания свойств объекта запроса.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
$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.
1 2 3 4 5 6 7 8 |
directionsService.route(request, function(response,status) { console.log(response); console.log(status); if(status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); |
В качестве первого аргумента, передается объект запроса, а в качестве второго функция, которая будет вызвана на исполнение после получения ответа. В свою очередь функция принимает так же два параметра – объект ответа и статус отправленного запрос. Если запрос был выполнен успешно (то есть в статусе содержится строка “OK”) то, используя объект directionsDisplay, мы задаем, рассчитанные маршруты, и отображаем их на карте, используя метод setMap(). Теперь давайте посмотрим на результаты:
Как Вы видите, маршрут успешно отображается на экране, а значит, урок можно завершать. Всего Вам доброго и удачного кодирования!!!