Yandex Maps API. Установка и определение маршрутов

В этой статье я опишу два вида работы с маршрутами. 1 - автоматическая прокладка маршрута между двумя точками на карте. 2 - ручная прокладка маршрута с помощью линии.

Автоматический маршрут

Воспользуемся стандартной функцией прокладки маршрута:

var start_point = [56, 37];
var end_point = [57, 39];
ymaps.route([start_point, end_point], {
 mapStateAutoApply: true,
 avoidTrafficJams: false,
 multiRoute: false,
 routingMode: "auto",
 viaIndexes: []
}).then(function (route) {
 var points = route.getWayPoints();  
 points.get(0).properties.set('balloonContent', '');
 points.get(1).properties.set('balloonContent', 'Дистанция: '+route.getHumanLength()+'
Продолжительность: '+route.getHumanTime());
 points.get(0).properties.set('iconContent', 'А');
 points.get(1).properties.set('iconContent', 'Б');
 map.geoObjects.add(route);
}, function (error) {
 // Ошибка error.message
});

start_point - Координаты или адрес точки начала маршрута
end_point - Координаты или адрес точки конца маршрута
mapStateAutoApply - Автоматически позиционировать карту
avoidTrafficJams - Включает построение маршрута с учетом пробок. При использовании опции учитывайте, что объезд пробок не всегда возможен.
multiRoute - Позволяет строить мультимаршруты.
routingMode - Тип маршрутизации для мультимаршрутов (auto - автомобильная маршрутизаци, masstransit - маршрутизация с использованием общественного транспорта)
viaIndexes – Индексы транзитных точек мультимаршрута.

Посмотреть пример

Ручной маршрут

Свой маршрут можно проложить с помощью линии (polyline), но учтите, что линия не будет обращать внимания на дороги и вообще возможность пройти по указанному маршруту.

var poly = new ymaps.Polyline([[56, 37], [57, 37], [57, 38], [55, 38]], {
 hintContent: "Ломаная линия",
 balloonContent: ""
}, {
 cursor: "pointer",
 draggable: true,
 hasBalloon: true,
 hasHint: true,
 interactiveZIndex: false,
 opacity: 1,
 openBalloonOnClick: true,
 openEmptyBalloon: false,
 openEmptyHint: false,
 openHintOnHover: true,
 strokeColor: '#000000',
 strokeOpacity: 0.8,
 strokeStyle: '',
 strokeWidth: 5,
 syncOverlayInit: false,
 visible: true
});
map.geoObjects.add(poly); 
map.setBounds(poly.geometry.getBounds());
poly.editor.startEditing(); 
poly.editor.startDrawing(); 

hintContent - содержимое всплывающей подсказки ломаной
balloonContent - содержимое балуна ломаной
cursor - Вид курсора над ломаной
draggable - Определяет возможность перетаскивания ломаной
hasBalloon - Определяет наличие поля balloon у ломаной
hasHint - Определяет наличие поля hint у ломаной
interactiveZIndex - Включает режим автоматического изменения z-index ломаной в зависимости от ее состояния.
opacity - Прозрачность
openBalloonOnClick - Определяет, показывать ли балун при щелчке на ломаной.
openEmptyBalloon - Определяет, показывать ли пустой балун при щелчке на ломаной.
openEmptyHint - Определяет, показывать ли пустой хинт при наведении указателя мыши на ломаную.
openHintOnHover - Определяет, показывать ли хинт при наведении указателя мыши на ломаную.
strokeColor - Цвет линии или обводки
strokeOpacity - Прозрачность линии или обводки
strokeStyle - Стиль линии или обводки
strokeWidth - Толщина линии или обводки
syncOverlayInit - Включает синхронное добавление оверлея на карту. По умолчанию добавление оверлея осуществляется асинхронно, что позволяет предотвратить зависания браузера при добавлении на карту большого числа ломаных. Однако, асинхронное добавление не позволяет получать доступ к оверлею сразу после добавления ломаной на карту.расстановка стрелок через каждые n пикселей марштура
visible - Определяет видимость ломаной

Для завершения редактирования и рисования линии используйте функции:

poly.editor.stopEditing(); 
poly.editor.stopDrawing();

Чтобы получить актуальный массив с координатами всего маршрута воспользуйтесь этим кодом:

var points = poly.geometry.getCoordinates();

Посмотреть пример

На этом я закончу статьи по Yandex Maps. До тех пор пока не появятся запросы на описание каких-либо пропущенных мною функций.

Список статей о Yandex Maps API смотрите здесь

Google Maps API. Установка и определение маршрутов

В этой статье я опишу два вида работы с маршрутами. 1 - автоматическая прокладка маршрута между двумя точками на карте. 2 - ручная прокладка маршрута с помощью линии.

Автоматический маршрут

Сперва нужно подключить функции маршрутов. Вставьте этот код в функцию инициализации карты:

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(map);
directionsDisplay.setOptions( { suppressMarkers: true, suppressInfoWindows: true } );

Теперь можно использовать эти функции. Как именно и с какими координатами их запускать - на ваше усмотрение.

var request = {
 origin: LatLng,
 destination: LatLng,
 travelMode: google.maps.TravelMode.DRIVING,
 unitSystem: google.maps.UnitSystem.METRIC,
 waypoints: [
  {
   location: LatLng,
   stopover:false
  },{
   location: LatLng,
   stopover:true
  }
 ],
 optimizeWaypoints: true,
 provideRouteAlternatives: true,
 avoidHighways: true,
 avoidTolls: true
};
directionsService.route(request, function(result, status) {
 if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(result);
  var routes = result.routes;
  var leg = routes[0].legs;
  var lenght = leg[0].distance.text;
  var duration = leg[0].duration.text;
 }
});

origin - (Обязательный параметр) координаты или адрес точки начала маршрута
destination - (Обязательный параметр) координаты или адрес точки конца маршрута
travelMode - (Обязательный параметр) способ перемещения (DRIVING - на автомобиле, BICYCLING - на велосипеде, TRANSIT - на общественном транспорте, WALKING - пешком)
unitSystem - система измерения (METRIC - метрическая, IMPERIAL - британская)
waypoints - массив с точками, через которые обязательно должен проходить маршрут
waypoints -> location - координаты или адрес точки
waypoints -> stopover - разделять ли маршрут на части в этой точке (true или false)
optimizeWaypoints - включает оптимизацию маршрута с помощью точек в waypoints (true или false)
provideRouteAlternatives – включает поиск нескольких альтернативных маршрутов (true или false)
avoidHighways – пытаться ли избегать автомагистралей (true или false)
avoidTolls – пытаться ли избегать платных дорого (true или false)
routes - массив с вариантами маршрутов
leg - массив с отрезками маршрута
lenght - дистанция первого отрезка (или всего маршрута, если отрезок всего один)
duration - продолжительность первого отрезка (или всего маршрута, если отрезок всего один)

Посмотреть пример

Ручной маршрут

Свой маршрут можно проложить с помощью линии (polyline), но учтите, что линия не будет обращать внимания на дороги и вообще возможность пройти по указанному маршруту.
Подключим функцию линии к карте:

var lineSymbol = {
 path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polyOptions = {
 editable:true,
 strokeColor: '#000000',
 strokeOpacity: 0.8,
 strokeWeight: 5,
 icons: [{
  icon: lineSymbol,
  offset : '10%',
  repeat : '200px'
 }]
}

poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = poly.getPath();

lineSymbol - добавляет на линию стрелки в сторону движения маршрута
editable - включает возможность редактирования (перетаскивания) уже проложенной линии
strokeColor - цвет линии
strokeOpacity - прозрачность линии (1 - не прозрачная, 0 - прозрачная)
strokeWeight - ширина линии (жирность)
icons -> offset - сдвиг стрелок от старта маршрута
icons -> repeat - расстановка стрелок через каждые n пикселей марштура

Чтобы добавить точки в маршрут достаточно добавить новую координату в массив path:

path.push(latLng);

Функция сама прорисует линию до указанной точки и отредактирует соответствующие координаты при перетаскивании точки.
Чтобы получить актуальный массив с координатами всего маршрута воспользуйтесь этим кодом:

var points = poly.getPath().getArray();

Посмотреть пример

На этом я закончу статьи по Google Maps. До тех пор пока не появятся запросы на описание каких-либо пропущенных мною функций.

Список статей о Google Maps API смотрите здесь