Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями.

Автор: | 28.07.2009

Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями.

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

И начнем мы с рассмотрения возможности реализации процедуры добавления.

Это можно сделать двумя способами:

— пользователь кликает по карте в нужном ему месте, где должна находиться будущая метка, а затем в открывшейся форме вводит её наименование и описание;

— пользователь заполняет следующие поля формы – наименование, описание и адрес объекта, где должна располагаться метка, а затем уже используя сервис геокодирования мы определяем необходимые координаты точки.

Рассмотрим первый вариант.

Реализовать его достаточно просто.

С начала мы берем уже готовый пример для отображения карты с элементами управления.

Вот его код:

<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 – нет.

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

Теперь необходимо вывести добавленные метки на карту.

Это тоже можно сделать несколькими способами.

  1. Вывести все метки на карту, включив в страницу формирования изображения php-код, который будет выполнять обращение к базе данных и выводить сразу все метки на карту, его мы в начале рассмотрим.
  2. Динамически формировать файл в формате языка YMapsML, а затем отображать его на карте.
  3. Подгружать метки на карту группами, только тогда когда они попадают в отображаемый в данный момент участок карты. Когда происходит смещение карты или изменение масштаба подгружаются другая группа точек.

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

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

В последующих выпусках мы познакомимся и с остальными двумя.

Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями.: 15 комментариев

  1. Asmadey

    Я поставил на joomla плагин яндекс карты, а вот куда добавлять эти коды в этой строке что то не пойму, где должен распологаться файл config.php, outpoint.php

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

      В этой заметке описана организация процедуры добавления меток пользователями без использования плагина Яндекс.Карт для Joomla.
      Как это можно сделать на обычном сайте используя комбинацию php, MySqL и JavaScript. Для доработки плагина Яндекс.Карт для Joomla до необходимой
      функциональности нужно проделать большой объем работы, я даже сказал легче написать новое расширение для Joomla. Может быть в дальнешем я напишу статью по этому поводу или разработаю необходимый плагин.

  2. Asmadey

    Получается на joomla это не прикрутить пока? ЖАль, очень надо, делаю рыболовный сайт и хотел бы чтобы пользователи оставляли метки с рыбными местами.

  3. Balbes

    Если была добавлена запись с длиной стороки, в поле descriptions, более 35 символов. Карта перстаёт отображаться

  4. Bulat

    Дайте ссылку на сайт где генерируется сама карта с меткой, где -то видел найти не могу…

  5. Николай

    Материалы супер, огромное спасибо!

    Хотелось бы почитать про 3 способ вывода точек. У меня к 2000 точек приближается сайт и уже притормаживает.

  6. Алексей

    Очень полезный материал. Спасибо вам! Скажите, планируется ли описание второго варианта нанесения на карту объектов — посредством геокодирования?

  7. Влад

    var myHtml = «Значение: » + mEvent.getGeoPoint() + »
    в этой строке выдает ошибку, помогите пожалуйста

  8. Илья

    Там с кавычками ошибка. Вот тут:

    var myHtml = «Значение:

    Открывающая двойная, закрывающая — одинарная.

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

      Все нормально, одинарная кавычка открывающая для кода формы ввода значений.

  9. Виталий

    Вы пишете: И перед строками добавления элементов управления на карту вставляем следующий код…

    Куда ни пробовал вставлять, этот код прямо на странице отражается.

  10. Игорь

    А как написать, что бы пользователь добавивший метку мог ее и удалять. но только свою?? Заранее спасибо!

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

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

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

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