Как построить маршрут на карте

Как проложить маршрут на автомобиле?

России и Зарубежья, и тут же увидеть проложенный маршрут на карте.

Для чего нужен калькулятор расстояний?

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

Вы увидите примерный расход топлива на всю поездку и сможете оценить финансовые
затраты. Вы узнаете, сколько времени проведете в пути.

Как проложить маршрут на автомобиле?

Для начала нужно задать начальную и конечную точки маршрута. В калькуляторе

расчета есть два поля — «город откуда» и «город куда». Введите в соответствующие поля

В поле «расход топлива» введите соответствующую характеристику вашей машины

(в литрах на 100 километров пути). В поле «цена топлива» — среднюю цену бензина,
которым вы заправляете вашу машину.

Эти данные нужны для расчета суммарных затрат топлива на всю поездку.

Во вкладке «дополнительные настройки расчета расстояний» вы можете задать еще

— «Объезд стран» — не прокладывать маршрут через территорию указанных стран.

Функция особенно полезна при международных перевозках. Позволяет не заезжать

на территорию стран с визовым режимом и избежать таможенных досмотров.

— «Объезд городов» — не прокладывать маршрут через территорию указанных

городов. Если вы не хотите проезжать через какой-то город, введите его название в

— «Объезд трасс» — исключить из расчета указанные трассы.

— «Через города» — функция позволяет провести маршрут через определенный

город или города, даже если они лежат вне кратчайшего пути.

— «Скорость на дороге» — существует 4 типа дорог — территориальная,

региональная, магистраль, автомагистраль. Вы можете исключить из расчета один

или несколько типов.

Проложить маршрут на автомобиле можно осуществить в одном из двух режимов:

— самый короткий маршрут — минимальное расстояние от одного города до другого;

— самый быстрый маршрут — минимальное время в пути (учитываются только

После того, как вы задали все условия, нажмите кнопку «рассчитать».

На появившейся карте маршрут будет отмечен толстой красной линией, а все лежащие на пути города — красными маркерами.

Результаты расчетов оформлены в виде таблицы, где указана длина всего пути, время в

поездке, общий расход топлива и сумма, в которую это топливо обойдется.

Также таблица содержит список всех городов, через которые проложен маршрут, с

разделением на области и страны.

Полученные результаты можно распечатать на принтере и взять с собой в дорогу вместо

атласа. Если у вас в машине есть возможность выйти в интернет (например, через

спутник или сотовую сеть), вы сможете сверяться с маршрутом и корректировать его в

зависимости от обстоятельств.

При этом помните, что при расчетах используются усредненные данные. Поэтому

полученные результаты — это только ориентировочные значения, а не точные цифры.

Нарисуйте маршрут карты

Нарисуйте или проложите маршрут с помощью нашего Шагомера Google Карт. Для начала введите адрес или город, или же в качестве альтернативного варианта, измените масштаб и переместите карту с помощью находящихся слева элементов управления, чтобы точно обозначить отправную точку вашего маршрута. Нарисуйте ваш пеший или беговой маршрут двойным нажатием на карту на каждый из пунктов по маршруту, по которому вы желаете следовать.

Вы можете менять режим просмотра – «карта», «вид со спутника», «гибрид» или «рельеф» при помощи элементов управления в верхнем правом углу на карте маршрута. Узнайте уточненное расстояние в милях или километрах после завершения работы над вашим маршрутом. Сохраните маршрут, введя название и описание, поделитесь маршрутом после его сохранения.

Как создавать свои карты и маршруты в Google Maps и делиться ими с друзьями

Иногда сервис «Google Карты» уступает в знании местности жителям и предлагаемые им маршруты не всегда удобны. Порой «Google Карты» могут даже проложить маршрут по закрытой или опасной дороге, что впоследствии может привести ко всевозможным проблемам.

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

Как создавать пользовательские маршруты в «Google Картах»

Для этого можно использовать сервис «Мои карты», который немного отличается от стандартных карт, поскольку позволяет создавать пользовательские карты с указанием направлений и пометок.

1. Нажмите иконку «Создать новую карту».

2. Имя карты можно изменить, нажав на «Карта без названия».

После этого нажмите кнопку «Добавить маршрут» под панелью поиска, чтобы начать добавлять маршруты.

3. Данное действие создаст на карте первый слой. В поле A введите начальную точку и в поле B введите пункт назначения. На карте появятся указания. Если вы хотите добавить дополнительные остановки, нажмите «Добавить пункт назначения».

4. Если вы хотите изменить маршрут, нажмите в любом месте на синей линии и перетащите ее на альтернативный маршрут, который хотите использовать. Для большего удобства можно увеличить масштаб. Вы также можете добавить пункты назначения в маршрут для изменения пути, выбранного Google по умолчанию.

5. Вы можете продолжать добавлять пункты назначения на один главный маршрут. Если же вы хотите разбить поездку на несколько дней, просто нажмите кнопку «Добавить пункт назначения» еще раз.

6. Вы также можете изменить порядок, в котором будете посещать пункты назначения на каждом слое карты, перетащив их в списке слева.

7. Когда карта будет готова, вы можете отправить ее на телефон или поделиться с другом. Для этого нажмите кнопку «Поделиться» и настройте совместный доступ как для любого документа на Google Диске.

Вы можете отправить ссылку на карту или приглашение для совместного доступа.

8. Пользователи iPhone (как создатель карты, так и получившие доступ) смогут просматривать карты в приложении «Карты Google». Для этого нужно открыть вкладку «Сохранено» и перейти в меню «Карты».

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

В «Google Карты» можно добавлять изображения, изменять стиль пометок и настраивать внешний вид карты. Однако стоит иметь в виду, что на слое с маршрутом нельзя делать пометки.

�� Смотрите также:

• Фотоскан от Google для iPhone, или как постить в Instagram старые бумажные фото без бликов.
• Gmail-мастер, или как навести порядок в почтовом ящике Google: 5 советов.
• Близкие друзья в Instagram, или как создать закрытую группу избранных контактов?

�� Мы в Telegram и YouTube, подписывайтесь!

Как построить маршрут яндекс карты API

Как можно построить маршрут между двумя точками с предварительной проверкой этих точек на яндекс картах. Нашел пример но там нужно задать точные координаты пример. А если у меня два input и в которых я ввожу адреса и хочу что бы расчет маршрута был динамическим, то тогда мне нужно что бы маршрут строился после того когда эти поля заполнены оба корректными данными. Пример валидации помогите объединить эти два примера.

Отслеживать
задан 3 фев 2020 в 16:16
Максим Сычевский Максим Сычевский
117 1 1 серебряный знак 11 11 бронзовых знаков

А почему вам не подходит стандартный контрол для построения маршрутов? Как в этом примере: tech.yandex.ru/maps/jsbox/2.1/route_panel_control

5 фев 2020 в 9:48

@Reni Во первых мне не нужна карта. Во вторых я использую дополнительные поля, например поле с указанием офиса или квартиры. В третьих я на лету хочу на основании данных маршрута считать стоимость доставки. Ну и в довесок все это работает на Yii2)))

5 фев 2020 в 10:05

Без показа карты бесплатную версию использовать запрещено условиями. Сценарий доставки тоже сам по себе нарушает пункт условий бесплатной версии.

5 фев 2020 в 11:10

@Reni так я использую информацию только для расчёта расстояния. Карту разве обязательно показывать? Мне она как токавая вообще не нужна. Покрайне мере не для этого сценария.

5 фев 2020 в 11:18

Да, в вашем описании используются и геокодирование, и построение маршрутов. Сам сценарий нарушает сразу два пункта бесплатного использования — нужно обязательно показывать карту и нельзя использовать бесплатную версию для логистики. Вот полные условия: tech.yandex.ru/maps/jsapi/doc/2.1/terms/index-docpage

5 фев 2020 в 11:22

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Маршрут на карте между двумя точками с предварительной проверкой адреса: https://jsfiddle.net/naivv/ohs4rnz5/

Строится не совсем динамически, для простоты использовал кнопки «проверить» и «построить».

Согласен с комментатором, по условиям использования это не подходит под бесплатный сценарий.

Кстати, при построении маршрута можно использовать определение местоположения пользователя:

control.routePanel.geolocate('from'); 

ymaps.ready(init); function init() < // Стоимость за километр. var DELIVERY_TARIFF = 20, // Минимальная стоимость. MINIMUM_COST = 500; // https://tech.yandex.ru/maps/jsbox/2.1/input_validation // Подключаем поисковые подсказки к полю ввода. var suggestView = new ymaps.SuggestView('suggest1'), suggestView = new ymaps.SuggestView('suggest2'), map, routePanelControl, addrFrom, addrTo; map = new ymaps.Map('map', < center: [55.75, 37.65], zoom: 9, controls: [] >); // Создадим панель маршрутизации. routePanelControl = new ymaps.control.RoutePanel( < options: < // Добавим заголовок панели. showHeader: true, title: 'Расчёт доставки' >>); var zoomControl = new ymaps.control.ZoomControl( < options: < size: 'small', float: 'none', position: < bottom: 145, right: 10 >> >); // Пользователь сможет построить только автомобильный маршрут. routePanelControl.routePanel.options.set( < types: < auto: true >>); // Неизменяемые точки "откуда" и "куда" routePanelControl.routePanel.state.set(< fromEnabled: false, toEnabled: false >); map.controls.add(routePanelControl).add(zoomControl); // При клике по кнопке запускаем верификацию введёных данных и построение маршрута $('#button1').bind('click', function(e) < geocode('#suggest1'); >); $('#button2').bind('click', function(e) < geocode('#suggest2'); >); $('#button3').bind('click', function(e) < if (addrFrom && addrTo) < showRoute(addrFrom.getAddressLine(), addrTo.getAddressLine()); >else < $('#notice3').css('display', 'block'); >>); function geocode(ctrl_id) < // Забираем запрос из поля ввода. var request = $(ctrl_id).val(); // Геокодируем введённые данные. ymaps.geocode(request).then(function(res) < var obj = res.geoObjects.get(0), error, hint; if (obj) < // Об оценке точности ответа геокодера можно прочитать тут: https://tech.yandex.ru/maps/doc/geocoder/desc/reference/precision-docpage/ switch (obj.properties.get('metaDataProperty.GeocoderMetaData.precision')) < case 'exact': break; case 'number': case 'near': case 'range': error = 'Неточный адрес, требуется уточнение'; hint = 'Уточните номер дома'; break; case 'street': error = 'Неполный адрес, требуется уточнение'; hint = 'Уточните номер дома'; break; case 'other': default: error = 'Неточный адрес, требуется уточнение'; hint = 'Уточните адрес'; >> else < error = 'Адрес не найден'; hint = 'Уточните адрес'; >// Если геокодер возвращает пустой массив или неточный результат, то показываем ошибку. if (error) < if (ctrl_id == '#suggest1') < addrFrom = null >else < addrTo = null >showError(ctrl_id, error); showMessage(ctrl_id, hint); > else < if (ctrl_id == '#suggest1') < addrFrom = obj >else < addrTo = obj >showResult(ctrl_id); > if (addrFrom && addrTo) < $('#notice3').css('display', 'none'); >else < $('#notice3').css('display', 'block'); >>, function(e) < console.log(e) >) > function showResult(ctrl_id) < // Удаляем сообщение об ошибке, если найденный адрес совпадает с поисковым запросом. $(ctrl_id).removeClass('input_error'); $('#notice1').css('display', 'none'); $('#notice2').css('display', 'none'); // полный адрес для сообщения под картой. if (ctrl_id == '#suggest1') < showMessage(ctrl_id, addrFrom.getAddressLine()); >else < showMessage(ctrl_id, addrTo.getAddressLine()); >// Сохраняем укороченный адрес для подписи метки. //shortAddress = [obj.getThoroughfare(), obj.getPremiseNumber(), obj.getPremise()].join(' '); > function showError(ctrl_id, message) < $(ctrl_id).addClass('input_error'); if (ctrl_id == '#suggest1') < $('#notice1').text(message); $('#notice1').css('display', 'block'); >else < $('#notice2').text(message); $('#notice2').css('display', 'block'); >> function showRoute(from, to) < // https://tech.yandex.ru/maps/jsbox/2.1/deliveryCalculator routePanelControl.routePanel.state.set(< from: from, to: to >); // Получим ссылку на маршрут. routePanelControl.routePanel.getRouteAsync().then(function(route) < // Зададим максимально допустимое число маршрутов, возвращаемых мультимаршрутизатором. route.model.setParams(< results: 1 >, true); // Повесим обработчик на событие построения маршрута. route.model.events.add('requestsuccess', function() < var activeRoute = route.getActiveRoute(); if (activeRoute) < // Получим протяженность маршрута. var length = route.getActiveRoute().properties.get("distance"); // Вычислим стоимость доставки. price = calculate(Math.round(length.value / 1000)), // Создадим макет содержимого балуна маршрута. balloonContentLayout = ymaps.templateLayoutFactory.createClass( 'Расстояние: ' + length.text + '.
' + 'Стоимость доставки: ' + price + ' р.'); // Зададим этот макет для содержимого балуна. route.options.set('routeBalloonContentLayout', balloonContentLayout); // Откроем балун. activeRoute.balloon.open(); > >); >); > function showMessage(ctrl_id, message) < if (ctrl_id == '#suggest1') < $('#messageHeader1').html('Пункт отправления:'); $('#message1').html(message); > else < $('#messageHeader2').html('Пункт назначения:'); $('#message2').html(message); > > // Функция, вычисляющая стоимость доставки. function calculate(routeLength) < return Math.max(routeLength * DELIVERY_TARIFF, MINIMUM_COST); >>

html, body < position: relative; width: 100%; height: 100%; padding: 0; margin: 0; font-size: 13px; font-family: sans-serif; overflow: hidden; >#footer < width: 376px; background-color: #f2f2ef; padding: 12px; >#map < height: 376px; width: 480px; margin: 0px 12px 18px 12px; position: relative; >#messageHeader, #message, #route, #header < width: 376px; margin: 12px 10px 12px 12px; >#button < display: inline-block; margin-top: 10px; font-size: 11px; color: rgb(68, 68, 68); text-decoration: none; user-select: none; padding: .2em 0.6em; outline: none; border: 1px solid rgba(0, 0, 0, .1); border-radius: 2px; background: rgb(245, 245, 245) linear-gradient(#f4f4f4, #f1f1f1); transition: all .218s ease 0s; height: 28px; width: 74px; >#button:hover < color: rgb(24, 24, 24); border: 1px solid rgb(198, 198, 198); background: #f7f7f7 linear-gradient(#f7f7f7, #f1f1f1); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); >#button:active < color: rgb(51, 51, 51); border: 1px solid rgb(204, 204, 204); background: rgb(238, 238, 238) linear-gradient(rgb(238, 238, 238), rgb(224, 224, 224)); box-shadow: 0 1px 2px rgba(0, 0, 0, .1) inset; >.input < height: 18px; margin-top: 10px; margin-right: 10px; width: 277px; padding: 4px; border: 1px solid #999; border-radius: 3px; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0); transition: .17s linear; >.input:focus < outline: none; border: 1px solid #fdd734; box-shadow: 0 0 1px 1px #fdd734; >.input_error, .input_error:focus < outline: none; border: 1px solid #f33; box-shadow: 0 0 1px 1px #f33; >#notice

         
 Проверить 
Адрес не найден
 Проверить 
Адрес не найден
 
 
Построить маршрут 
Недостаточно данных для построения маршрута