Многие уже сталкивались с этой задачей как на сайте установить карту с правильным маршрутом до пункта назначения из своего города! У меня уже есть публикация Как проложить маршрут на карте Google, но мне она показалась не удобной. Вот и я решил реализовать на одном из своих проектов такую, на мой взгляд удобную функцию. Поискав в интернете разные варианты я нашел, по моему, самый оптимальный и удобный. На самом деле всё очень просто! На сайте Яндекса есть Расчёт стоимости доставки который вполне подходит к данной задаче, но я немного сделал подругому:
И так начнем!
HTML
Вставляем в нужное место код:
<div id="controls">
<label><span>От:</span> <input type="text" id="route-from" value="Москва" /></label>
<label><span>До:</span> <input type="text" id="route-to" value="Саратов" /></label>
<div><input type="submit" value="Построить маршрут" onclick="createRoute();" /></div>
<br />
<div id="route-length"></div>
</div>
<div id="map"></div>
Подключаем стили для вывода поисковой формы городов
CSS
#map {
width: 100%;
height: 650px;
margin-top: 70px;
}
#controls {
position: absolute;
top: 5.5em;
right: 1.5em;
z-index: 10;
background: #fff;
padding: 1em 2em;
opacity: 0.9;
box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.1);
}
#controls label {
display: block;
margin: 1em 0;
font-size: 12pt;
}
#controls label span {
display: inline-block;
min-width: 3.5em;
}
#controls label input {
font-size: 12pt;
padding-bottom: .2em;
width: 10em;
border: none;
border-bottom: solid 1px #999;
color: #000;
outline: none;
webkit-appearance: none;
}
Ну и сам скрипт вывода карты
JS
var map, mapRoute;
ymaps.ready(function() {
map = new ymaps.Map('map', {
center: [55.76, 37.64],
zoom: 5
});
});
function createRoute() {
// Удаление старого маршрута
if (mapRoute) {
map.geoObjects.remove(mapRoute);
}
var routeFrom = document.getElementById('route-from').value;
var routeTo = document.getElementById('route-to').value;
// Создание маршрута
ymaps.route([routeFrom, routeTo], {mapStateAutoApply:true}).then(
function(route) {
map.geoObjects.add(route);
document.getElementById('route-length').innerHTML = 'Длина маршрута = ' + route.getHumanLength();
mapRoute = route;
},
function(error) {
alert('Невозможно построить маршрут');
}
);
}
Вот и все. Готово!
Пользуйтесь! Буду рад если это Вам поможет в осуществлении своих проектов!