Javascript → Проложить маршрут на Яндекс.Картах с помощью API
Пример отображения на карте маршрута от Белорусского вокзала до Лефортово:
ymaps.route(['Москва, Белорусский вокзал', 'Москва, Лефортово'], ).then( function(route) < map.geoObjects.add(route); alert('Длина маршрута = ' + route.getHumanLength()); >, function(error) < alert('Невозможно построить маршрут'); >);
Написанное актуально для
Яндекс.Карты API 2
Похожие записи
- Узнать с помощью API Яндекс.Карт входит ли адрес в пределы МКАДа
- Отличие Debounce от Throttling
- Вывести карту из конструктора Яндекс.Карт в jQuery UI Dialog
- enquire.js — работа с медиа-выражениями в javascript
- Видео курс по основам JavaScript на русском
Комментарии
Надо почаще сюда заглядывать, а то я похожую статью накатал на днях =\
Подскажите пожалуйста, а как в данном примере реализовать возможность проставления пунктов отправления/назначения на карте метками?
Использую данный пример, только вот не получается форму ввода пунктов отправления подвязать из своей формы, а не используя контролы карты.
Здравствуйте. Скажите есть ли способы ( может, плагины) для прокладки маршрута и показа всех точек чере которые он проходит. Например достопримечательности, которые также указаны либо во вьюхе либо иным способом.
API Яндекс.Карты – геокодирование и маршрутизация на JavaScript
Яндекс.Карты — замечательный, популярный инструмент, демонстрирующий отличные результаты геокодирования и построения маршрутов.
Но предположим, что перед пользователем стоит задача обработать большой список адресов/координат, а именно, посчитать расстояния между точками по автомобильным дорогам и определить координаты внушительного списка объектов. Тогда-то он и столкнется с отсутствием возможности пакетной обработки в пользовательском интерфейсе сервиса. Однако, Яндекс об этом позаботился, предоставив в условно-бесплатное пользование JavaScript API.
Разработчики на JavaScript API получают техническую поддержку, подробную документацию, инструментарий для тестирования кода в “песочнице” на сайте проекта https://yandex.ru/dev/maps/jsapi/
Итак, я попробую воспользоваться этим инструментом для решения задачи геокодирования и построения маршрутов. Мне понадобится учетная запись Яндекс и API ключ для сервиса “JavaScript API и HTTP Геокодер”, который можно создать в Кабинете разработчика https://developer.tech.yandex.ru. Не буду подробно останавливаться на этом моменте, в сети достаточно информации, чтобы самостоятельно разобраться.
JavaScript API работает только в браузере, поэтому для выполнения кода нужно разработать web-страничку. В моем случае я могу обойтись статичным html-файлом, т.е. читать исходные данные и записывать результат буду в html-элементы, т.е. для упрощения обойдусь без использования серверной части. Итак, запускаю текстовый редактор и создаю заготовку будущей web-страницы.
Тут будет два многострочных текстовых поля, первое для ввода исходных данных (data) и второе — для записи результата (target), и две кнопки для запуска процесса обработки и очистки поля с результатом.
Обратите внимание, в заголовке страницы в элементе script подключается так необходимый мне API от Яндекса, а в параметрах url атрибута src необходимо указать тот самый секретный api-ключ, полученный в кабинете разработчика.
После загрузки страницы, в глобальном контексте выполнения JavaScript станет доступен объект ymaps, через который я получаю доступ к API, в том числе и к необходимым мне функциям геокодирования и маршрутизации. Напишу две функции “router” и “geocoder”, которые, как не сложно догадаться, реализуют построение маршрута и выполняют геокодирование. Конечно же JavaScript API реализуют значительно больше картографических сервисов и даже получаемые тут данные о маршруте и местоположении являются далеко не полными. Полное описание используемых методов доступно по ссылке, указанной в начале этого материала. Но вернемся к поставленной задаче и разберемся сначала с функцией “router”:
function router(from, to)< return ymaps.route([from,to],
В качестве аргументов она принимает пункты отправления и назначения, которыми могут быть как строками с адресом, так и массивами [широта, долгота]. Эти аргументы передаются в метод route объекта ymaps вместе с параметрами построения маршрута, в моем случае routingMode: “auto” – это указание строить именно автомобильный маршрут. Метод возвращает promise-объект, содержащий в том числе протяженность маршрута в метрах, который затем и возвращает функция.
Очередь функции “geocoder”:
function geocoder(place)< return ymaps.geocode(place,
Функция принимает адрес строкой или массив [широта, долгота]. Этот параметр передается в метод geocode объекта ymaps вместе с параметрами геокодирования, в моем случае results: 1 – указание вернуть только один, наиболее точный, результат. Функция вернет promise-объект, содержащий координаты, тип, наименование, точность геокодирования.
Ну что ж, уже можно пользоваться. Например, если вызвать следующий код
, то в консоль браузера будут записаны результат геокодирования объекта “Москва” и информация о протяженности автомобильного маршрута “Москва -> Санкт-Петербург”
Остается только реализовать построчную обработку содержимого элемента “data” и запись результата в элемент “target”. Ниже приводится итоговое содержимое html-файла, в котором это реализуется функцией “start_process”.
Страница в браузере с результатами обработки выглядит примерно следующим образом:
Верхнее текстовое поле для вставки исходных данных, в нижнее пишется полученный результат. Если в строке исходных данных встречается разделитель (разделителем между пунктом отправления и прибытия является “;”), то осуществляется расчет маршрута, в противном случае выполняется геокодирование сроки (в примере на картинке выше “Лондон”). Также регулярным выражением определяется, являются ли исходные данные географическими координатами (широта и долгота разделены запятой) или строкой адреса, при этом адреса и координаты можно комбинировать при построении маршрута.
Внимательному читателю наверняка сразу бросилась в глаза вот эта конструкция в листинге кода:
await new Promise(r => setTimeout(r, 50));
Тут я делаю короткую (50 мсек) паузу перед обработкой следующей строки, т.е. искусственно устанавливаю предел максимальной скорости обработки в 20 строк в секунду. Спросите, зачем? И тут настало время упомянуть о технических лимитах бесплатного использования JavaScript API от Яндекса. А их два, но они довольно «вкусные»:
— Суточное ограничение – до 25000 запросов к API (каждый вызов метода geocode или route считается за 1). Информация о расходовании суточного лимита доступна в Кабинете разработчика.
— Кол-во запросов в секунду – не более 50
Т.е. пауза между вызовами API нужна, чтобы не превысить «скоростной лимит», установленный Яндексом.
На этом, пожалуй, всё, “за кадром” осталась css-таблица стилей, а также разработка backend на Node.js, но это — уже совсем другая история.
Как сделать на сайте кнопку построить маршрут с переходом в яндекс карты?
но маршрут строиться от данной точки, а нужно от текущего местоположения до неё.
- Вопрос задан более трёх лет назад
- 10982 просмотра
Комментировать
Решения вопроса 0
Ответы на вопрос 2
Все гораздо проще
Просто поставь тильду перед координатами)
и убери лишние атрибуты
Ответ написан более трёх лет назад
Нравится 6 1 комментарий
AndreySocium @AndreySocium
целую твои руки
mahmudchon @mahmudchon
Как вариант, если имеет место использование API.
https://tech.yandex.ru/maps/jsbox/2.1/geolocated_m.
Вставить этот код и Обновить.
ymaps.ready(function () < var myMap = new ymaps.Map('map', < center: [55.753994, 37.622093], zoom: 9, // Добавим кнопку для построения маршрутов на карту. controls: ['routeButtonControl'] >); var control = myMap.controls.get('routeButtonControl'); // Зададим координаты пункта отправления с помощью геолокации. control.routePanel.geolocate('from'); control.routePanel.state.set(< type: "pedestrian", to: '55.659172, 37.762848' >); // Откроем панель для построения маршрутов. control.state.set('expanded', true); >);Ответ написан более трёх лет назад
Виктор Викторов @CoolHeart Автор вопроса
в таком случае маршрут построится в приложении яндекс карт? не на карте сайта?
Построение маршрута на карте, по заданным точкам — API Яндекс.Карт 2.х
На своем блоге я уже писал о том, как можно строить маршруты на Яндекс.Карте: «Построение автомобильных маршрутов, используя API Яндекс.Карт 2.х».
Мне задали вопрос, а как можно строить маршруты по кликам на карте?
В этой заметке я отвечаю на него.
С начала рассмотрим работу примера, а затем я поясню его код.
На карте, кликая левой кнопкой мыши, мы задаем расположение точек маршрута от 2 до 9.
Затем, нажимаем на кнопку «Построить маршрут» и происходит построение маршрута через заданные точки.
Если нам необходимо построить новый маршрут, мы нажимаем на кнопку «Очистить» и можем повторять действия для добавления другого маршрута.
Рассмотрим код примера:
Добавление маршрута на карту, с заданием точек прохождения маршрута - API Яндекс.Карт 2.х
В самом начале мы определяем глобальные переменные для карты — myMap, маршрута — route, счетчик для нумерации меток, массивов для меток markers и точек маршрута point.
После этого определяем начальные параметры карты и добавляем на нее необходимые элементы управления.
Затем мы пишем код для отслеживания события клика по карте.
myMap.events.add('click', function (e) < var coords = e.get('coordPosition'); if(markers.length < 10) < myPlacemark = new ymaps.Placemark([coords[0].toPrecision(6),coords[1].toPrecision(6)], < // Свойства // Текст метки iconContent: ch >, < // Опции // Иконка метки будет растягиваться под ее контент preset: 'twirl#blueStretchyIcon' >); markers.push(myPlacemark); myMap.geoObjects.add(myPlacemark); ch++; > else < alert("Вы задали максимальное количество точек"); >>);
При каждом клике, мы добавляем метку на карту и заносим ее в массив markers.
Проверяем общее количество меток, оно должно быть меньше 10.
После нажатия на кнопку «Построить маршрут», вызывается функция calcRoute для построения маршрута.
Когда мы нажимаем кнопку «Очистить», вызывается функция reset в которой, удаляется маршрут с карты и метки.
Также обнуляются массивы для хранения меток и точек на карте.
Раздел: Без рубрики Яндекс Карты Метки: API Яндекс.Карт v2, маршруты, метки
Построение маршрута на карте, по заданным точкам — API Яндекс.Карт 2.х : 6 комментариев
- Евгений 09.07.2012 Чудненько. Спасибо! Проблемка: Кнопка «Очистить» удаляет только последний маршрут(из двух(как мин.) маршрутов).
- admin Автор записи 11.07.2012 На карте можно рисовать одновременно только один маршрут, а после нажимать «Очистить».