Новогодние маршруты на Яндекс.Карте

Автор: | 28.12.2011

Подходит к концу 2011 год, это последняя заметка в этом году.

Хочу поздравить всех читателей блога с наступающим Новым Годом!

Пожелать счастья, здоровья и успехов в наступающем году!

В этой заметке я хочу показать Вам возможность расчета маршрутов по России с использованием API Яндекс.Карт.

И поскольку она выходит в предверии Нового Года, то и пример будет связан с праздником.

В примере будут строится маршруты от Великого Устюга, родины Деда Мороза до крупнейших городов России (Волгоград, Екатеринбург, Казань, Москва, Нижний Новгород, Новосибирск, Омск, Ростов-на-Дону, Санкт-Петербург, Самара, Уфа, Челябинск).

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

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

Например, мы выбираем «Казань», на карте строится маршрут от Великого Устюга до Казани, а внизу карты показывается общая длина маршрута в километрах (Длина маршрута: 783 км ).

Рассмотрим код нашего примера.

В начале все как всегда, мы подключаем API Яндекс.Карт и задаем основные параметры нашей карты (координаты центра, масштаб, элементы управления).

Нам интересна функция calcRoute, она принимает значения из формы в переменные start и end, затем точки маршрута мы передаем классу Ymaps.Router.

var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

Добавляем на карту маршрут map.addOverlay(router);

Если маршрут успешно проложен, то генерируется событие Success.

После него мы рассчитываем длину маршрута, используя метод getDistance, который дает длину маршрута в метрах, а мы делим ее на 1000, получаем километры.

Результат передаем в div с id="resmarshrut".

YMaps.Events.observe(router, router.Events.Success, function () {
			var distance = Math.ceil(router.getDistance()/1000) ;
			YMaps.jQuery("#resmarshrut").html('');
			YMaps.jQuery("#resmarshrut").append('Длина маршрута: '+distance+' км');
});

Подробнее о маршрутизаторе можно прочитать здесь

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

Новогодние маршруты на Яндекс.Карте: 4 комментария

  1. Lena

    Как в этом примере ограничить поиск по карте? Например только в Нижегородской области?

  2. Lena

    догадалась )))
    router = new YMaps.Router(
    // Список точек, которые необходимо посетить
    [start, end],[],
    { boundedBy : mysearchBounds, strictBounds : true,
    viewAutoApply: true
    }
    );

  3. Сергей

    Здравствуйте!
    Подскажите, пожалуйста, как сделать в данном примере дополнительно стартовую точку из выпадающего списка:
    Начало: | Великий Устюг | или |Выберите из выпадающего списка начальную точку |
    Конец: |Волгоград|

    Заранее спасибо за ответ!

  4. Сергей

    Здравствуйте!
    Подскажите, пожалуйста, как сделать в данном примере дополнительные возможности выбора точек маршрута:
    Начало: [ Великий Устюг ] или |Выберите из выпадающего списка начальную точку |[V]
    Конец: [ ] или |Выберите из выпадающего списка конечную точку |[V]

    Заранее спасибо за ответ!

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

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