API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL – дополнение

Автор: | 09.01.2012

После публикации заметок «API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL» и «API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL – продолжение» ко мне стали поступать вопросы, как задать цвет и толщину полилинии и сохранять эти параметры в месте с координатами вершин ломаной?

В этой заметке я расскажу об этом.

В качестве исходного кода, возьмем пример отсюда, код которого рассматривается в заметке «API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL – продолжение» и доработаем его.

В начале, нам необходимо предоставить возможность пользователю, задать толщину полилинии и ее цвет.

Для этого мы должны на станицу с картой добавить форму ввода.

После того, как ломаная линия будет нарисована, мы должны передать параметры ее цвета и толщины скрипту upload.php для записи в базу данных.

Для удобного ввода цвета полилинии мы будем использовать плагин jPicker для javascript-библиотеки jQuery.

Нужно скачать его и подключить к нашей странице, а также подключить библиотеку jQuery с сервера хостинга библиотек Google.

Загруженный архив с плагином jPicker, мы разархивируем и из получившейся папки копируем файлы jPicker.css, jpicker-1.1.6.min.js, а также каталоги images и css в новую папку js, которая находится в том же каталоге что и файлы нашего примера gmap-polyline.html и upload.php

Теперь, начинаем редактировать файл с картой gmap-polyline.html.

В начале, сразу после строки подключения API Google Maps, добавляем слеюющий код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 
<link rel="Stylesheet" type="text/css" href="js/css/jPicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="js/jPicker.css" />  
<script src="js/jpicker-1.1.6.min.js" type="text/javascript"></script>
 
<script type="text/javascript">        
  $(document).ready(
    function()
    {
      $('#pline_color').jPicker();
    });
</script>

В нем мы подключаем библиотеку jQuery и файлы для плагина jPicker.

Затем мы инициализируем плагин, после загрузки всего документа, цвет полилинии будет задаваться в элементе формы с id=”pline_color”.
Далее, мы добавляем код формы для ввода значений, после строки «Чтобы удалить существующий маркер, нажмите на маркер снова.»

<form id="plineoptions" action="#">
<p>Введите толщину полилинии:<br />
<input type="text" size="2" id="pline_width" value="3"><br />
Введите цвет полилинии:<br />
<input type="text" id="pline_color" value="FF0000">
</p>
</form>

Это код обычной формы с двумя текстовыми полями, одно для ввода толщины линии с id=”pline_width” (значение по умолчанию 3 пикселя), второе — цвет с id="pline_color" (значение по умолчанию FF0000 — красный).

Мы должны получить значения из формы для построения поллилинии.

Для этого, определяем глобальные переменные для хранения значений hline и pcolor, дописываем их через запятую после значения map.

Была строка var map;

Стала — var map, hline, pcolor;

И в функции leftClick, где у нас задаются параметры для рисования линии, сразу после строки if(markers.length > 1) {
добавляем две стоки кода:

hline = $('#pline_width').attr('value');
pcolor = '#'+$('#pline_color').attr('value');

В нем мы получаем значения из полей формы.

А строки

var poly = new GPolyline(points, "#ff0000", 2, 1);

и

var newpoly = new GPolyline(points, "#ff0000", 2, 1);

переписываем следующим образом:

var poly = new GPolyline(points, pcolor, hline, 1);

и

var newpoly = new GPolyline(points, pcolor, hline, 1);

После нажатия на ссылку «Сохранить линию», мы должны передать все параметры в скрипт upload.php.

Для этого нам нужно дополнить строку параметров в функции showPoints

Было

"points="+points);
Стало

"points="+points+"&hpline="+hline+"&colorpline="+pcolor);

И конечно немного изменить код файла upload.php.

Сразу после строки $points = trim($_POST[‘points’]);

добавим еще две, для получения, переданных значений толщины и цвета полилинии

$plineh = (int)trim($_POST['hpline']);
$plinecolor = trim($_POST['colorpline']);

Изменим и строку записи в базу данных на следующий код:

$result = mysql_query("INSERT INTO usersline VALUES (0, '$plinecolor', '$plineh', ' ', '$points_line')");

Можно еще улучшить наш пример, добавив возможность удаления полилинии.

Для этого сразу после строки:

<p><a href="#" onclick="showPoints()">Сохранить линию</a></p>

Добавим

<p><a href="#" onclick="deletePline()">Удалить линию</a></p>

Мы добавили ссылку, при клике на которую вызывается функция deletePline для удаления полилинии с карты.

Код функции deletePline:

function deletePline() {
 
map.clearOverlays();
 
polylines = new Array();
 
count = 0;
 
points = new Array();
 
markers = new Array();
 
$("#route").html('');
$("#message").html('');
}

Код функции deletePline очень простой.

В начале мы удаляем все с карты строкой map.clearOverlays();, а затем заново определяем масивы для хранения отрезков и вершин полилинии, обнуляем счетчик count.

Загрузить архив с файлами примера

Рассмотрим работу примера

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

Щелкаем мышью по маленькому красному квадратику, появляется форма для выбора цвета.

Выбираем нужный оттенок и нажимаем на кнопку ОК.

Выбранный цвет, присваивается полю.

После чего, мы можем рисовать полилинию, заданными толщиной и цветом.

Если нам линия не понравилась, мы можем удалить ее, нажав на ссылку «Удалить линию».

Если мы хотим сохранить созданную линию в базе данных MySQL, нажимаем ссылку «Сохранить линию».

Посмотреть работу примера в действии

Сохраненные линии, можно посмотреть на карте здесь

Небольшое замечание

Если у Вас не будут отображаться рисунки для окна плагина jPicker, Вам необходимо поравить путь к изображениям в файле jpicker-1.1.6.min.js, изменив переменную clientPath на свой путь к паке images плагина.

API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL – дополнение: 3 комментария

  1. qwerty

    здравствуйте не могли бы вы скинуть исходники не получается разобраться если вас не затруднит

  2. Алексей

    Подскажите пожалуйста, как отметить дорогу на карте? Дорога есть, её просто нужно выделить. Полилиниями рисовать наверное не совсем получится по самой дороге. И как задать условия для объезда отмеченного участка дороги и отмеченных точек на карте. Зараннее Спасибо!

    1. admin Автор записи

      Другого способа, как только нарисовать на ней полилинию, отметить дорогу нет

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *