Google maps api. Построение маршрутов на карте

В данной статье мне хотелось бы рассмотреть еще одну возможность google maps api — добавление маршрутов на карты. Если по маркерам информации в интернете достаточно, то по данной теме, да еще и на русском, толковых примеров мне найти не удалось. Безусловно, все что будет написано ниже, есть у гугла, но чтобы начать разбираться в api необходимы хоть какие-то минимальные представления о предмете.

Я предлагаю рассмотреть пример, в котором пользователю на карту предоставляется возможность добавлять маркеры и маршруты. Пример достаточно функциональный, может быть использован в качестве основы для своей собственной разработки.

У маршрутов на карте мы можем менять положение узловых точек, удалять их и добавлять новые. В узлы добавлять маркеры, задавать к ним (маркерам) описание. Все это видно на рисунке.

Информация о добавленных маршрутах и маркерах будет храниться в БД mysql. В примере я использовал jquery и один плагин для него. Кроме всего этого, для отображения информации о маркере, я использовал класс ExtInfoWindow (посмотреть), расширяющий возможность стандартных гугловских окон. В данной статье мне не хочется останавливаться на том, как работать с маркерами и как реализовывать взаимодействие с базой, но весь данный функционал реализован в примере, и желающие могут сами взглянуть на исходные коды в архиве (мотаем на конец статьи).

Итак начнем. Первое, что необходимо сделать — разместить карту. Создаем на странице div c id=map_canvas и пишем на джаваскрипт следующий код:

map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(58.12432, 55.0), 4);
map.setUIToDefault();
map.mode = '';

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

Размещаем на странице два div элемента с id=add_route и id=del_route. Это будут кнопки добавления и удаления маршрута. Назначаем на них два обработчика:

$('#add_route').click(handle_add_route);
$('#del_route').click(handle_del_route);

В функции handle_add_route() проверяем режим в котором мы находимся и вызываем функцию построения маршрута:

if(map.mode !== '') return;
map.mode = 'add_route';
build_route(0,'');

В функцию build_route передаем id маршрута и его координаты, так как мы создаем новый, то передаем ноль и пустую строку. Далее задаем цвет линии, прозрачность и ее толщину:

var lineColor = "#CF3A34";
var opacity = .70;
var lineWeight = 2;

Координаты точки — пара чисел, разделенных запятой. Строка координат — координаты, разделенные точкой с запятой. Если была передана строка с координатами, то формируем из нее массив точек. Преобразование в понятный карте формат выполняем с помощью функции fromUrlValue().

var line = [];
if(points)
{
var p = [];
newroute = false;
p = points.match(/([0-9.,\-]*)/g);
for(var i=0;i<p.length;i++)
if(p[i]!='')
line.push(GLatLng.fromUrlValue(p[i]));
}

Теперь создаем маршрут и начинаем его отрисовку:

theroute = new GPolyline(line, lineColor, lineWeight, opacity);
start_drawing(theroute, id, update_route);

Третьим параметром тут передаем имя функции, которая будет вызываться при изменении маршрута (функция update_route() считывает вершины, преобразует их в строку и отправляет на сервер).

function start_drawing(poly, id, onUpdate)
{
map.addOverlay(poly);

if(!id)
{
poly.enableDrawing();
editing_route = poly;
}

poly.enableEditing({onEvent: "mouseover"});
poly.disableEditing({onEvent: "mouseout"});
…

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

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

GEvent.addListener(poly, "lineupdated", function()
{
if(id)
update_route();
});

Теперь вешаем событие endline — окончание добавления (двойной клик на последней точке маршрута).

GEvent.addListener(poly, "endline", function()
{
GEvent.bind(poly, "lineupdated", this, onUpdate);
save_route(poly);
});

По этому событию мы вешаем обработчик изменения маршрута и созраняем его.

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

GEvent.addListener(poly, "click", function(latlng, index)
{
if (typeof index == "number")
{
if(map.mode == 'add_marker')
{
point = poly.getVertex(index);
if(point) save_marker(point);
}
}
});
}

Сохранение маршрута происходит следующим образом:

function save_route(poly)
{
var finish = function(resp)
{
if( check_response(resp) )
{
var id = resp.content;
poly.route_id = id;
routes[id] = {};
routes[id] = {'id': id, 'point':points};
map.mode = '';
}
}

var pointsCount = poly.getVertexCount();
var points = [];
for(i = 0; i < pointsCount; i++)
points[i] = poly.getVertex(i).toUrlValue();
points = points.join(';');

var params = 'action=add_route&points='+points;
$.post(this_url, params, finish, 'json');
}

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

На этом можно закончить статью, основной функционал мы рассмотрели. Хочу еще раз сказать, что в прилагаемом примере реализована полноценная работа с маркерами. Все довольно прозрачно и просто даже для новичков.

Скачать пример можно тут http://www.filehoster.ru/files/ee8710

Для тех, кто соберется запускать пример у себя — не забывайте менять ключ GOOGLE_MAPS_API.

На последок — состав архива:
index.php – обработка ajax запросов, получение данных из базы
dump.sql – структура базы данных
/css/style.css – стили для страницы и для класса ExtInfoWindow
/img – изображения для класса ExtInfoWindow
/inc/core.php – настройки скрипта, параметры подключения к базе и пара дополнительный функций на php
/js/extinfo.js — класс ExtInfoWindow
/js/jquery-1.3.2.min.js – jquery
/js/jquery.editable.js – плагин для jquery для редактирования текста (onfly)
/js/script.js – основной функционал.
/tpl/template.html — шаблон страницы с картой