Как я для себя выяснил в прошлый раз google и сам может строить маршруты между двумя точками. Для этого существует класс Gdirections. Что же, посмотрим, как реализовать такую возможность.
На самом деле, задача намного проще, чем в первом примере. Достаточно инициализировать класс, навесить пару обработчиков, и отобразить результат. Все за нас считают и строят.
В начале как обычно создаем карту, задаем элементы управления:
Задаем начальные точки (можно указывать как, непосредственно, адреса, так и географические координаты):
И вызываем функцию построения, передавая в нее начальную и конечную точки:
В ней создаем экземпляр класса маршрута:
Вешаем обработчик, который будет сообщать нам об ошибках:
Задаем обработчик вызываемый при удачном построении маршрута (о нем чуть ниже)
И формируем маршрут:
Все, маршрут сформирован, осталось только его отобразить на карте после окончательной загрузки (обработка события load).
Получаем от маршрута ломаную линию и добавляем на карту:
Создаем два маркера, поставим их в начало и конец маршрута, маркеры сделаем перетаскиваемыми, по окончанию перетаскивания, будем вызывать функцию change_position (в ней будем перестраивать маршрут по новым координатам начала и конца):
Гугл не только строит нам маршрут, но и предоставляет нам текстовые комментарии по направлению движения, получим и выведем их (а заодно длину маршрута):
Вот и все, пример можно посмотреть по адресу http://gdirections.webservis.ru/
Все довольно просто, однако существует один очень неприятный момент. Для нашей страны, маршруты гугл отдает только для московской области. Регион четко видно на карте, зеленый цвет без белых пятен (примерные границы, Тверь-Владимир-Рязань-Калуга). Остается ждать расширения.
На самом деле, задача намного проще, чем в первом примере. Достаточно инициализировать класс, навесить пару обработчиков, и отобразить результат. Все за нас считают и строят.
В начале как обычно создаем карту, задаем элементы управления:
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(55.758611, 37.616638), 10);
map.setUIToDefault();Задаем начальные точки (можно указывать как, непосредственно, адреса, так и географические координаты):
var startpoint = "55.75585, 37.62036";
var endpoint = "Россия Реутов";И вызываем функцию построения, передавая в нее начальную и конечную точки:
add_direction(startpoint, endpoint);В ней создаем экземпляр класса маршрута:
function add_direction(startpoint, endpoint)
{
direct = new Gdirections();
…Вешаем обработчик, который будет сообщать нам об ошибках:
GEvent.addListener(direct,"error", function() {
alert("Location(s) not recognised. Code: "+direct.getStatus().code);
});Задаем обработчик вызываемый при удачном построении маршрута (о нем чуть ниже)
GEvent.addListener(direct,"load", function(){…}И формируем маршрут:
direct.loadFromWaypoints([startpoint,endpoint],{getPolyline:true,getSteps:true});
}Все, маршрут сформирован, осталось только его отобразить на карте после окончательной загрузки (обработка события load).
Получаем от маршрута ломаную линию и добавляем на карту:
poly = direct.getPolyline();
map.addOverlay(poly);Создаем два маркера, поставим их в начало и конец маршрута, маркеры сделаем перетаскиваемыми, по окончанию перетаскивания, будем вызывать функцию change_position (в ней будем перестраивать маршрут по новым координатам начала и конца):
ms = new GMarker(poly.getVertex(0),{'draggable': true, 'icon': G_START_ICON});
me = new GMarker(poly.getVertex(poly.getVertexCount()-1),{'draggable': true, 'icon': G_END_ICON});
GEvent.addListener(ms, "dragend", change_position);
GEvent.addListener(me, "dragend", change_position);
map.addOverlay(ms);
map.addOverlay(me);Гугл не только строит нам маршрут, но и предоставляет нам текстовые комментарии по направлению движения, получим и выведем их (а заодно длину маршрута):
var descr = "";
for(i=0;i<direct.getRoute(0).getNumSteps();i++)
descr = descr + '<br>' + (i+1)+'. ' + direct.getRoute(0).getStep(i).getDescriptionHtml();
descr += 'Расстояние маршрута: ' + direct.getDistance().html;
document.getElementById('route_descr').innerHTML = descr;Вот и все, пример можно посмотреть по адресу http://gdirections.webservis.ru/
Все довольно просто, однако существует один очень неприятный момент. Для нашей страны, маршруты гугл отдает только для московской области. Регион четко видно на карте, зеленый цвет без белых пятен (примерные границы, Тверь-Владимир-Рязань-Калуга). Остается ждать расширения.