Версия:
Популярные примеры
Карта
Геообъекты
Балун и хинт
Элементы управления
Активные области
Кластеризация
GeoQuery
Поведения и события
Поиск по карте
Пробки
Местоположение пользователя
Маршрутизация
YMapsML
GeoXML
ObjectManager
Модульная система
Панорамы
Внешние модули

Расчёт стоимости доставки

Сохранить как файлыЭкспорт на JSFiddle

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

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

При клике на метке начальной точки откроется балун с информацией о маршруте и стоимости доставки.

\n\n","deliveryCalculator.js":"ymaps.ready(init);\n\nfunction init() {\n // Стоимость за километр.\n var DELIVERY_TARIFF = 20,\n // Минимальная стоимость.\n MINIMUM_COST = 500,\n myMap = new ymaps.Map('map', {\n center: [60.906882, 30.067233],\n zoom: 9,\n controls: []\n }),\n // Создадим панель маршрутизации.\n routePanelControl = new ymaps.control.RoutePanel({\n options: {\n // Добавим заголовок панели.\n showHeader: true,\n title: 'Расчёт доставки'\n }\n }),\n zoomControl = new ymaps.control.ZoomControl({\n options: {\n size: 'small',\n float: 'none',\n position: {\n bottom: 145,\n right: 10\n }\n }\n });\n // Пользователь сможет построить только автомобильный маршрут.\n routePanelControl.routePanel.options.set({\n types: {auto: true}\n });\n\n // Если вы хотите задать неизменяемую точку \"откуда\", раскомментируйте код ниже.\n /*routePanelControl.routePanel.state.set({\n fromEnabled: false,\n from: 'Москва, Льва Толстого 16'\n });*/\n\n myMap.controls.add(routePanelControl).add(zoomControl);\n\n // Получим ссылку на маршрут.\n routePanelControl.routePanel.getRouteAsync().then(function (route) {\n\n // Зададим максимально допустимое число маршрутов, возвращаемых мультимаршрутизатором.\n route.model.setParams({results: 1}, true);\n\n // Повесим обработчик на событие построения маршрута.\n route.model.events.add('requestsuccess', function () {\n\n var activeRoute = route.getActiveRoute();\n if (activeRoute) {\n // Получим протяженность маршрута.\n var length = route.getActiveRoute().properties.get(\"distance\"),\n // Вычислим стоимость доставки.\n price = calculate(Math.round(length.value / 1000)),\n // Создадим макет содержимого балуна маршрута.\n balloonContentLayout = ymaps.templateLayoutFactory.createClass(\n 'Расстояние: ' + length.text + '.
' +\n 'Стоимость доставки: ' + price + ' р.');\n // Зададим этот макет для содержимого балуна.\n route.options.set('routeBalloonContentLayout', balloonContentLayout);\n // Откроем балун.\n activeRoute.balloon.open();\n }\n });\n\n });\n // Функция, вычисляющая стоимость доставки.\n function calculate(routeLength) {\n return Math.max(routeLength * DELIVERY_TARIFF, MINIMUM_COST);\n }\n}"},"resources":[],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/deliveryCalculator/"}
Пишете на JavaScript? У нас есть вакансии
Sun Sep 18 2022 20:10:14 GMT+0300 (Moscow Standard Time)