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

После публикации заметок «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 плагина.

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