Продолжаем знакомиться с особенностями API Яндекс.Карт версии 2.х (смотрите части 1, 2, 3).
В этой заметке, на примерах, мы познакомимся с возможностями построения автомобильных маршрутов.
Первый пример, решает наиболее типичную задачу для сайтов организаций, расчет маршрута проезда до ее офиса.
Для примера, я возьму адрес недавно открывшегося в Нижнем Новгороде кинотеатра Синема Парк DeLuxe IMAX — ул. Бетанкура 1 ТРК Седьмое небо.
Рассмотрим работу примера.
Над окном карты расположена форма для ввода адреса отправления, конечный адрес у нас постоянный (Нижний Новгород, ул. Бетанкура 1).
После ввода адреса (Нижний Новгород, Варварская ул., 7), мы нажимаем на кнопку «Найти», происходит расчет и построение на карте маршрута.
Поясню исходный код примера.
<!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; charset2=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>
В самом начале, мы подключаем javascript-библиотеку jquery, т. к. ее нет в новой версии API API Яндекс.Карт 2.х.
По клику на кнопке «Найти» вызывается функция в которой определяются значения полей формы search_route начало и конец маршрута.
Эти значения передаются маршрутизатору ymaps.route, а в качестве дополнительного параметра mapStateAutoApply: true — для автоматического позиционирования карты, после построения маршрута.
Далее мы проверяем существует или нет на карте уже построенный ранее маршрут, если да то удаляем его с карты, после чего добавляем новый маршрут командой myMap.geoObjects.add(route);
Если в процессе построения маршрута возникнут ошибки, выводим их во всплывающем окне.
При построении маршрута возможно задания дополнительных параметров, с одним из них mapStateAutoApply мы уже познакомились.
Перечислю остальные параметры:
avoidTrafficJams — значения true — строить маршрут с учетом пробок, false — без учета пробок При использовании опции учитывайте, что объезд пробок не всегда возможен.
Значение по умолчанию: false;
boundedBy — значение определяет область на карте, где предположительно находятся искомые объекты. Используется, если точки маршрута заданы почтовым адресом, а не координатами;
strictBounds — определяет возможность поиска только внутри области, заданной опцией boundedBy. Используется, если точки маршрута заданы почтовым адресом, а не координатами.
Значение по умолчанию: false
Давайте зададим область поиска в границах Нижнего Новгорода, тогда дополнительно указывать город в адресной строке ненужно.
Второй пример.
Код примера:
<!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; charset2=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, // автоматически позиционировать карту boundedBy: [[56.155974,43.549068],[56.421028,44.155787]], strictBounds: 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>
Здесь код примера похож на предыдущий, за исключением двух параметров:
boundedBy: [[56.155974,43.549068],[56.421028,44.155787]] — задает границы области;
strictBounds: true — возможность поиска только в заданной области.
Мы можем задавать промежуточные точки для нашего маршрута.
Третий пример
В этом примере между точками start и end, мы добавляем промежуточную точку на пл. Ленина
{ type: 'viaPoint', // площадь Ленина - транзитная точка (проезжать через эту точку, но не останавливаться в ней) point: 'Нижний Новгород, площадь Ленина' },
Тогда при вычислении маршрута, он всегда должен будет проходить через транзитную точку.
При желании мы можем различным образом изменять стиль отображения маршрута на карте, а также обозначение начала и конца маршрута.
Четвертый пример
Здесь мы изменяем иконки на красные и добавляем текст в метки, а также изменяем цвет отображения самого маршрута и его прозрачность.
Код примера:
<!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; charset2=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; route.options.set({ strokeColor: '0000ffff', opacity: 0.9 }); myMap.geoObjects.add(route); // С помощью метода getWayPoints() получаем массив точек маршрута // (массив транзитных точек маршрута можно получить с помощью метода getViaPoints) var points = route.getWayPoints(); // Задаем стиль метки - иконки будут красного цвета, и // их изображения будут растягиваться под контент points.options.set('preset', 'twirl#redStretchyIcon'); // Задаем контент меток в начальной и конечной точках points.get(0).properties.set('iconContent', 'Точка отправления'); points.get(1).properties.set('iconContent', 'Точка прибытия'); }, 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>
Цвет и величина прозрачности маршрута задается в строке
route.options.set({ strokeColor: ’0000ffff’, opacity: 0.9 });
Еще несколько строк кода отвечают за изменения стиля конечных точек маршрута:
// С помощью метода getWayPoints() получаем массив точек маршрута // (массив транзитных точек маршрута можно получить с помощью метода getViaPoints) var points = route.getWayPoints(); // Задаем стиль метки - иконки будут красного цвета, и // их изображения будут растягиваться под контент points.options.set('preset', 'twirl#redStretchyIcon'); // Задаем контент меток в начальной и конечной точках points.get(0).properties.set('iconContent', 'Точка отправления'); points.get(1).properties.set('iconContent', 'Точка прибытия');
Мы легко можем заменить стандартные иконки на свои.
Пятый пример
Здесь мы задаем стили для нашей картинки:
points.options.set('preset', { iconImageHref: 'my-markers.png', // картинка иконки iconImageSize: [32, 37], // размеры картинки iconImageOffset: [16, -37] // смещение картинки });
Можно вывести общую длину маршрута и время в пути под картой.
Шестой пример.
Добавив после строки:
myMap.geoObjects.add(route);
следующие строки
$("#resmarshrut").append('Общая длина маршрута: '+route.getHumanLength()); $("#resmarshrut").append('<br /> Время в пути: '+route.getHumanTime());
В этих строчках кода мы обращаемся к соответствующим методам объекта router.Route:
getHumanLength() — он возвращает строковое представление длины маршрута с единицами измерения;
GetHumanTime() — он возвращает строковое представление времени проезда маршрута с единицами измерения.
С другими методами можно познакомиться здесь
И последний пример — это вывод маршрутного листа.
Пример кода:
<!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; charset2=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); // Получаем первый маршрут var way = route.getPaths().get(0), // Маршрут состоит из сегментов. Сегмент - участок маршрута, который нужно проехать // до следующего изменения направления движения. segments = way.getSegments(), moveList = 'Трогаемся,</br>'; for (var i = 0; i < segments.length; i++) { var street = segments[i].getStreet(); moveList += ('Едем ' + segments[i].getHumanAction() + (street ? ' на ' + street : '') + ', проезжаем ' + segments[i].getLength() + ' м.,'); moveList += '</br>' } moveList += 'Останавливаемся.'; $("#list").empty(); // Выводим маршрутный лист $('#list').append(moveList); }, 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> <br /><br /> <div id="list"></div>
</body> </html>
В этом примере весь маршрут разбивается на сегменты и для каждого с помощью методов объекта router.Segment формируется текстовая подсказка движения по маршруту.
С другими методами можно познакомиться здесь
После сформированный маршрутный лист передается в контейнер div с id="list".
Запись опубликована
12 июня 2012 в 14:40 Категория: Яндекс Карты.
Вы можете следить за комментариями с помощью RSS 2.0-ленты.
Вы можете оставить комментарий или трекбэк с вашего сайта.
