Построение автомобильных маршрутов, используя API Яндекс.Карт 2.х

Опубликовано: 13.04.2018

видео Построение автомобильных маршрутов, используя API Яндекс.Карт 2.х

Метки и персональные Яндекс Карты

Продолжаем знакомиться с особенностями API Яндекс.Карт версии 2.х (смотрите части 1 , 2 , 3 ).



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

Первый пример, решает наиболее типичную задачу для сайтов организаций, расчет маршрута проезда до ее офиса.

Для примера, я возьму адрес недавно открывшегося в Нижнем Новгороде кинотеатра Синема Парк DeLuxe IMAX — ул. Бетанкура 1 ТРК Седьмое небо.


Яндекс.Карты. Прокладка маршрута

Рассмотрим работу примера.

Над окном карты расположена форма для ввода адреса отправления, конечный адрес у нас постоянный (Нижний Новгород, ул. Бетанкура 1).

После ввода адреса (Нижний Новгород, Варварская ул., 7), мы нажимаем на кнопку «Найти», происходит расчет и построение на карте маршрута.


Яндекс.Карты для Android

Посмотреть пример в действии

Поясню исходный код примера.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Добавление маршрута на карту - API Яндекс.Карт 2.х</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   <script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>   <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script> <script type="text/javascript"> var myMap, route;     // Как только будет загружен API и готов DOM, выполняем инициализацию ymaps.ready(init);   function init () { myMap = new ymaps.Map("map", { center: [56.326944, 44.0075], zoom: 12 });     $('#search_route').submit(function () { var start = $("#start").val(); var end = $("#end").val(); ymaps.route([ // Список точек, которые необходимо посетить [start], [end]], { // Опции маршрутизатора mapStateAutoApply: true // автоматически позиционировать карту }).then(function (router) { route && myMap.geoObjects.remove(route); route = router; myMap.geoObjects.add(route); }, function (error) { alert("Возникла ошибка: " + error.message); }); return false; }); }     </script> </head>   <body> <form id="search_route"> <b>Начало: </b> <input id="start" type="text" value="Нижний Новгород, " style="width: 360px;"><br /> <b>Конец: Синема Парк DeLuxe IMAX</b> <input id="end" type="text" value="Нижний Новгород, ул. Бетанкура 1" style="width: 260px;"> <input type="submit" value="Найти"/> </form> <br /> <div id="map" style="width:800px;height:600px"></div> </body> </html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Добавление маршрута на карту - API Яндекс.Карт 2.х</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script> <script type="text/javascript"> var myMap, route; // Как только будет загружен API и готов DOM, выполняем инициализацию ymaps.ready(init); function init () { myMap = new ymaps.Map("map", { center: [56.326944, 44.0075], zoom: 12 }); $('#search_route').submit(function () { var start = $("#start").val(); var end = $("#end").val(); ymaps.route([ // Список точек, которые необходимо посетить [start], [end]], { // Опции маршрутизатора mapStateAutoApply: true // автоматически позиционировать карту }).then(function (router) { route && myMap.geoObjects.remove(route); route = router; myMap.geoObjects.add(route); }, function (error) { alert("Возникла ошибка: " + error.message); }); return false; }); } </script> </head> <body> <form id="search_route"> <b>Начало: </b> <input id="start" type="text" value="Нижний Новгород, " style="width: 360px;"><br /> <b>Конец: Синема Парк DeLuxe IMAX</b> <input id="end" type="text" value="Нижний Новгород, ул. Бетанкура 1" style="width: 260px;"> <input type="submit" value="Найти"/> </form> <br /> <div id="map" style="width:800px;height:600px"></div> </body> </html>