Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями.
Этой заметкой я открываю большой цикл статей, посвященный созданию Яндекс.Карты с возможностью самостоятельного добавления меток пользователями сайта.
И начнем мы с рассмотрения возможности реализации процедуры добавления.
Это можно сделать двумя способами:
— пользователь кликает по карте в нужном ему месте, где должна находиться будущая метка, а затем в открывшейся форме вводит её наименование и описание;
— пользователь заполняет следующие поля формы – наименование, описание и адрес объекта, где должна располагаться метка, а затем уже используя сервис геокодирования мы определяем необходимые координаты точки.
Рассмотрим первый вариант.
Реализовать его достаточно просто.
С начала мы берем уже готовый пример для отображения карты с элементами управления.
Вот его код:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Добавление точки</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=AIW0o0kBAAAAkwyUMwMAEkDz8ddCkU0UnlyLEu4ddFBXhQQAAAAAAAAAAAA1Md4ULCo5QbciEo5T26eV1lhuEQ==" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
var map;
function init () {
map = new YMaps.Map( document.getElementById("YMapsID") );
map.setCenter(new YMaps.GeoPoint(43.979459,56.291908), 15,
YMaps.MapType.MAP);
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
}
</script>
</head>
<body onload="init();">
<div id="YMapsID" style="width:600px; height:400px;"></div>
</body>
</html> |
И перед строками добавления элементов управления на карту вставляем следующий код:
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
var myHtml = "Значение: " + mEvent.getGeoPoint() + " "
+'<form id="formadd" action="outpoint.php" method="post">
Название: <input maxlength="80" name="namepoint" size="20" type="text" />
Описание: <textarea cols="20" rows="5" name="descriptpoint"></textarea>
<input name="pcoord" type="hidden" value="'+mEvent.getGeoPoint()+'" />
<input name="subpoint" type="submit" value="Добавить" />
</form>';
map.openBalloon(mEvent.getGeoPoint(), myHtml);
}); |
Что он из себя представляет.
Здесь мы обрабатываем событие при клике левой кнопкой мыши по карте.
По щелчку мы открываем балун с формой для ввода названия и описания метки, а также запоминаем значение координат и передаем все в скрипт outpoint.php медодом POST.
Теперь разберем содержимое скрипта outpoint.php, в котором проверяются введенные данные и заносятся в базу данных MySQL.
С начала нам необходимо будет создать отдельную базу данных на сервере или использовать уже существующую.
Пусть она буден называться ymap_bd.
Кодировка базы данных и таблицы будет utf-8.
Создаем таблицу для хранения наших данных.
Это можно сделать используя PhpMyAdmin выполнив следующий SQL-код:
CREATE TABLE `mappoint` ( `id` int(11) NOT NULL auto_increment, `name` varchar(255) NOT NULL, `descriptions` varchar(255) NOT NULL, `cx` varchar(10) NOT NULL, `cy` varchar(10) NOT NULL, `user` varchar(255) NOT NULL, `view` int(2) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; |
Я не буду подробно описывать содержимое файла outpoint.php, надеюсь Вы имеете начальльные знания по PHP и MySQL.
Полный код можно посмотреть здесь.
В начале, мы соединяемся с базой данных, код я вывел в отдельный файл – config.php
<?php
$sdb_name = "localhost";
$user_name = "userymap";
$user_password = "123";
$db_name = "ymap_bd";
// соединение с сервером базы данных
if(!$link = mysql_connect($sdb_name, $user_name, $user_password))
{
echo "<br>Не могу соединиться с сервером базы данных<br>";
exit();
}
// выбираем базу данных
if(!mysql_select_db($db_name, $link))
{
echo "<br>Не могу выбрать базу данных<br>";
exit();
}
mysql_query('SET NAMES utf8');
?> |
После этого проверяем, заполнены ли необходимые поля формы и присваиваем значения коротким переменным.
Если значения существуют, то удаляем из них лишни пробелы и переводы строк, а также с помощью функции htmlspecialchars преобразуем спецсимволы в их HTML-эквиваленты и обезопасим себя от того, если в форму, вместо текста, будут добавлять какой-либо код.
Затем с помощью функции explode разделяем значения координат метки на карте.
И записываем все данные в нашу предварительно созданную таблицу mappoint.
Рассмотрим ее структуру.
Элемент id – служит для хранения уникального идентификатора записи, необходим для осуществления поиска и выборки данных из таблицы.
Столбец name – служит для хранения названия метки, а descriptions – ее описания.
Поля cx и cy – для хранения значений координат долготы и широты соответственно.
Два остальных поля носят вспомогательный характер, они могут Вам понадобиться в дальнейшем или нет.
Если у Вас на сайте предусмотрена регистрация пользователей, то используя поле user Вы можете хранить в таблице информацию какие метки принадлежат какому пользователю.
Поле view может использоваться для хранения признака отображать или нет данную метку на карте, например, когда view=1 – метка отображается, а view=0 – нет.
И так мы с Вами реализовали добавление меток пользователями на карту и запись значений в базу данных.
Теперь необходимо вывести добавленные метки на карту.
Это тоже можно сделать несколькими способами.
- Вывести все метки на карту, включив в страницу формирования изображения php-код, который будет выполнять обращение к базе данных и выводить сразу все метки на карту, его мы в начале рассмотрим.
- Динамически формировать файл в формате языка YMapsML, а затем отображать его на карте.
- Подгружать метки на карту группами, только тогда когда они попадают в отображаемый в данный момент участок карты. Когда происходит смещение карты или изменение масштаба подгружаются другая группа точек.
Третий способ наиболее предпочтителен, когда общее количество меток очень большое (1000 и более) потому, что увеличивается общее время загрузки карты при использовании первых двух способов.
В следующей заметке я рассмотрю первый самый простой способ вывода меток из базы данных на карту.
В последующих выпусках мы познакомимся и с остальными двумя.
Я поставил на joomla плагин яндекс карты, а вот куда добавлять эти коды в этой строке что то не пойму, где должен распологаться файл config.php, outpoint.php
В этой заметке описана организация процедуры добавления меток пользователями без использования плагина Яндекс.Карт для Joomla.
Как это можно сделать на обычном сайте используя комбинацию php, MySqL и JavaScript. Для доработки плагина Яндекс.Карт для Joomla до необходимой
функциональности нужно проделать большой объем работы, я даже сказал легче написать новое расширение для Joomla. Может быть в дальнешем я напишу статью по этому поводу или разработаю необходимый плагин.
Получается на joomla это не прикрутить пока? ЖАль, очень надо, делаю рыболовный сайт и хотел бы чтобы пользователи оставляли метки с рыбными местами.
Включи голову.Это можно сделать элементарно.
Смотри http://webmap-blog.ru/?p=235
Там все ясно описано. Пример есть и тут pizzaweb.ru
Если была добавлена запись с длиной стороки, в поле descriptions, более 35 символов. Карта перстаёт отображаться
Дайте ссылку на сайт где генерируется сама карта с меткой, где -то видел найти не могу…
Материалы супер, огромное спасибо!
Хотелось бы почитать про 3 способ вывода точек. У меня к 2000 точек приближается сайт и уже притормаживает.
Очень полезный материал. Спасибо вам! Скажите, планируется ли описание второго варианта нанесения на карту объектов — посредством геокодирования?
Просто и понятно, спасибо!!!
var myHtml = «Значение: » + mEvent.getGeoPoint() + »
в этой строке выдает ошибку, помогите пожалуйста
Там с кавычками ошибка. Вот тут:
var myHtml = «Значение:
Открывающая двойная, закрывающая — одинарная.
Все нормально, одинарная кавычка открывающая для кода формы ввода значений.
Вы пишете: И перед строками добавления элементов управления на карту вставляем следующий код…
Куда ни пробовал вставлять, этот код прямо на странице отражается.
А как написать, что бы пользователь добавивший метку мог ее и удалять. но только свою?? Заранее спасибо!
Нужно сделать регистрацию пользователей, для каждой метки хранить информацию о пользователе, который ее добавил. Тогда можно будет сделать так, что пользователь может редактировать и удалять только свои метки.