понедельник, 13 января 2014 г.

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. До тех пор пока не появятся запросы на описание каких-либо пропущенных мною функций.


7 комментариев:

  1. Не хватает примеров работы

    ОтветитьУдалить
  2. Здравствуйте. Не могу разобраться и надеюсь на Вашу помощь. Я хочу выводить в текстарею актуальные координаты, это получается,
    google.maps.event.addListener(map, 'click', function(event) {
    path.push(event.latLng);
    route_container.value=points;
    });
    но только на клик. а что нужно сделать, что-бы в арею выводились актуальные координаты, после сдвига одного из указателей?

    ОтветитьУдалить
  3. Здравствуйте. Как в автоматическом маршруте можно вывести направление движения (стрелки)?

    ОтветитьУдалить
  4. Этот комментарий был удален автором.

    ОтветитьУдалить
  5. написано одно
    в примере другое

    как проложить маршрут имею массив точек lat/lon ?
    нигде нет нормального примера! 2 часа ищу

    ОтветитьУдалить
  6. Код в статье не сработал, нужна помощь! Возможно перед ним нужно что то еще прописать, какие нибудь скрипты...? Извиняюсь за вопрос чайника

    ОтветитьУдалить