Api Карт Google. Построение Маршрутов На Карте

В этой статье я хотел бы рассмотреть еще одну особенность API Google Maps — добавление маршрутов на карты.

Если информации о маркерах в Интернете достаточно, то толковых примеров на эту тему, да еще и на русском языке, мне найти не удалось.

Конечно, все, что будет написано ниже, в Google , но чтобы начать разбираться в API, нужно хотя бы минимальное понимание предмета.

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

Пример достаточно функционален и может быть использован как основа для собственных разработок.

Для маршрутов на карте мы можем менять положение узлов, удалять их и добавлять новые.

Добавляйте к узлам маркеры и присваивайте им описания (маркеры).

Все это можно увидеть на рисунок .

Информация о добавленных маршрутах и маркерах будет храниться в базе данных mysql. В примере я использовал jquery и один плагин для него.

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

Итак, начнем.

Первое, что нужно сделать, это разместить карту.

Создайте на странице div с id=map_canvas и напишите на JavaScript следующий код:

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

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

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

Назначаем им два обработчика:

$('#add_route').

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

click(handle_del_route);

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

Далее задайте цвет линии, прозрачность и толщину:

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);

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(); });

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'); }

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

На этом мы можем закончить статью; мы рассмотрели основные функции.

Еще раз хочу сказать, что приложенный пример реализует полноценную работу с маркерами.

Все достаточно прозрачно и просто даже для новичков.

Скачать пример можно здесь 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 — шаблон страницы карты Теги: #Чулан #карты Google GMarker GPolyline

• Конференция Dump-2016: Обзор Секции Web-Дизайна

  19 Oct, 24

• Умная Перьевая Ручка Neo Smartpen N2

  19 Oct, 24

• Il2Cpp: Советы По Отладке Сгенерированного Кода

  19 Oct, 24

• Детективная История - Что Общего Между Auto.ru И Brazzers?

  19 Oct, 24

• Элвис И Аэропорт

  19 Oct, 24

• Panasonic Покажет 150-Дюймовый Плазменный Дисплей На Выставке Ces 2008

  19 Oct, 24

• Будут Ли Google И Myspace Работать Вместе?

  19 Oct, 24

• Соревнования Нон-Стоп!

  19 Oct, 24

• Как Я Взломал Starbucks И Получил Безлимитный Кофе

  19 Oct, 24

• Прослушивание Правок В Википедии

  19 Oct, 24