Продовжуємо знайомитися з особливостями API Яндекс.Карт версії 2.х (дивіться частини 1. 2. 3).
У цій замітці, на прикладах, ми познайомимося з можливостями побудови автомобільних маршрутів.
Перший приклад, вирішує найбільш типову задачу для сайтів організацій, розрахунок маршруту проїзду до її офісу.
Розглянемо роботу прикладу.
Поясню вихідний код прикладу.
По кліку на кнопці «Знайти» викликається функція в якій визначаються значення полів форми search_route початок і кінець маршруту.
Ці значення передаються маршрутизатора ymaps.route, а в якості додаткового параметра mapStateAutoApply: true - для автоматичного позиціонування карти, після побудови маршруту.
Далі ми перевіряємо існує чи ні на карті вже побудований раніше маршрут, якщо так то видаляємо його з карти, після чого додаємо новий маршрут командою myMap.geoObjects.add (route);
Якщо в процесі побудови маршруту виникнуть помилки, виводимо їх у спливаючому вікні.
При побудові маршруту можливо завдання додаткових параметрів, з одним з них mapStateAutoApply ми вже познайомилися.
Перерахую інші параметри:
avoidTrafficJams - значення true - будувати маршрут з урахуванням пробок, false - без урахування пробок При використанні опції враховуйте, що об'їзд пробок не завжди можливий.
Значення за замовчуванням: false;
Тут код прикладу схожий на попередній, за винятком двох параметрів:
boundedBy: [[56.155974,43.549068], [56.421028,44.155787]] - задає межі області;
strictBounds: true - можливість пошуку тільки в заданій області.
Ми можемо задавати проміжні точки для нашого маршруту.
У цьому прикладі між точками start і end, ми додаємо проміжну крапку на пл. Леніна
Тоді при обчисленні маршруту, він завжди повинен буде проходити через транзитну точку.
При бажанні ми можемо по-різному змінювати стиль відображення маршруту на карті, а також позначення початку і кінця маршруту.
Тут ми змінюємо іконки на червоні і додаємо текст в мітки, а також змінюємо колір відображення самого маршруту і його прозорість.
Колір і величина прозорості маршруту задається в рядку
Ще кілька рядків коду відповідають за зміни стилю кінцевих точок маршруту:
// За допомогою методу getWayPoints () отримуємо масив точок маршруту // (масив транзитних точок маршруту можна отримати за допомогою методу getViaPoints) var points = route.getWayPoints (); // Задаємо стиль мітки - іконки будуть червоного кольору, і // їх зображення будуть розтягуватися під контент points.options.set ( 'preset', 'twirl # redStretchyIcon'); // Задаємо контент міток в початковій і кінцевій точках points.get (0) .properties.set ( 'iconContent', 'Точка відправлення'); points.get (1) .properties.set ( 'iconContent', 'Точка прибуття');
Ми легко можемо замінити стандартні іконки на свої.
Тут ми задаємо стилі для нашої картинки: