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

Автор: | 24.12.2012

На страницах своего блога я рассказывал о том, как можно реализовать добавление меток пользователями и вывод по категориям, используя API Яндекс.Карт 1.x, сморите здесь и здесь.

В этой заметке я опишу как можно сделать тоже для версии API Яндекс.Карт 2.х.

В качестве основы мы возьмем пример из заметки «Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями — API Яндекс.Карт v2.x Продолжение».

В начале мы создадим таблицу ymapapiv2_markers_cat в базе данных MySQL, где будем хранить данные:

CREATE TABLE IF NOT EXISTS `ymapapiv2_markers_cat` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `hintText` varchar(255) NOT NULL,
  `balloonText` varchar(255) NOT NULL,
  `type` varchar(50) NOT NULL,
  `lat` varchar(255) NOT NULL,
  `lon` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

После начнем исправлять файлы.

Начнем с основного файла, который выводит карту с метками.

Для примера я буду использовать три различных категории: бары, кафе и рестораны.

Удаляем весь код лишних типов меток в форме добавления.

Теперь он будет иметь следующую структуру:

myMap.balloon.open(coords, {                        
contentBody: '<div id="menu">
<div id="menu_list">
<label>Название:</label> <input type="text" class="input-medium" name="name_text" /><br />
<label>Подсказка:</label> <input type="text" class="input-medium" name="hint_text" /><br />
<label>Балун:</label> <input type="text" class="input-medium" name="balloon_text" /><br />
<div class="control-group"><label>Значок метки:</label>
<div class="input-prepend"><span class="add-on"><img src="http://api.yandex.ru/maps/doc/jsapi/2.x/ref/images/styles/bar.png" style="height: 20px" /></span>
<select name="image" id="image" class="span2" >
<option data-path="http://api.yandex.ru/maps/doc/jsapi/2.x/ref/images/styles/bar.png" value="twirl#barIcon">Бар</option>
<option data-path="http://api.yandex.ru/maps/doc/jsapi/2.x/ref/images/styles/cafe.png" value="twirl#cafeIcon">Кафе</option>
<option data-path="http://api.yandex.ru/maps/doc/jsapi/2.x/ref/images/styles/restaurant.png" value="twirl#restaurantIcon">Ресторан</option>
</select></div>
</div></div>
<button type="submit" class="btn btn-success">Сохранить</button>
</div>'});

В примере метки не будут содержать текст в самом значке.

Поэтому код дальше тоже немного притерпел изменение

//Сохраняем данные из формы		
$('#menu button[type="submit"]').click(function () {				
var name = $('input[name="name_text"]').val(),
hintText = $('input[name="hint_text"]').val(),
 balloonText = $('input[name="balloon_text"]').val(),
stylePlacemark = $('select[@name=image] option:selected').val();	
 
//Передаем параметры метки скрипту addmetki.php для записи в базу данных
$("#res").load("addmetki-cat.php", {name: name, hinttext : hintText, balloontext : balloonText, styleplacemark : stylePlacemark, lat : coords[0].toPrecision(6), lon : coords[1].toPrecision(6)});
 
//Добавляем метку на карту		
myMap.geoObjects.add(myPlacemark);		
 
//Изменяем свойства метки и балуна
myPlacemark.properties.set({
balloonContentHeader: name,
hintContent: hintText,
balloonContent: balloonText							
});

Переменные myMap и myCollection вынесены в глобальную область видимости.

После добавления элементов управления на карту, определяем коллекцию геообъектов myCollection

myCollection = new ymaps.GeoObjectCollection();

Код отвечающий за вывод данных о меках на карту я вынес в отдельную функцию show_c

Она имеет вид:

function show_c(c){
		$('#obj a').removeClass("active");
 
		myCollection.removeAll();			 
 
		//Запрос данных и вывод маркеров на карту
		$.getJSON("vivodpointsmap-cat.php", {cat:c},
		function(json){
				for (i = 0; i < json.markers.length; i++) {
					var myPlacemark = new ymaps.Placemark([json.markers[i].lat,json.markers[i].lon], {
                    // Свойства
                   	hintContent: json.markers[i].hinttext,
					balloonContentHeader: json.markers[i].name, 
                    balloonContentBody: json.markers[i].balloontext                   
					}, {					
                    // Опции
                    preset: json.markers[i].styleplacemark					
                });
 
				myCollection.add(myPlacemark);
 
			}
			 myMap.geoObjects.add(myCollection);
		});
			$('a#'+c).addClass("active");
			return false;
 
		}

Кликая по ссылкам рядом с картой, мы передаем название категории функции show_c.

В ней формируется запрос к скрипту vivodpointsmap-cat.php, а затем из ответа формируются метки и добавляются в коллекцию.

Затем коллекция добавляется на карту.

При следующем обращении к функции show_c данные удаляются из коллекции и добавляются новые.

Также меняются атрибуты ссылки с активной на неактивную.

Метки на карте по категориям

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

Рассмотрим файлы addmetki.php и vivodpointsmap.php

Они тоже будут иметь изменения.

В файле vivodpointsmap.php мы принимаем, переданное методом GET значение названия категории, а затем выбираем из таблицы данные.

В зависимости от категории, определяем название стиля отображения метки.

switch($mar['type'])
{
	case 'bar':
      $stylePlacemark = 'twirl#barIcon';
	  break;
	case 'cafe': 
      $stylePlacemark = 'twirl#cafeIcon';
	  break;	
	default:		 
     $stylePlacemark = 'twirl#restaurauntIcon';
}

Формируем ответ в формате json.

В файле addmetki.php мы добавим код:

switch($stylePlacemark)
{
	case 'twirl#barIcon':
      $type = 'bar';
	  break;
	case 'twirl#cafeIcon': 
      $type = 'cafe';
	  break;	
	default:		 
     $type = 'restauraunt';
}

после получения данных.

Здесь в зависимости от названия стиля метки, мы определяем категорию.

А далее записываем данные в таблицу ymapapiv2_markers_cat

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

Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями и вывод по категориям. Версия для API Яндекс.Карт 2.х: 14 комментариев

  1. Антон

    Отличный пример! Спасибо!
    Хотелось бы также иметь возможность Админу сайта удалять/редактировать без прямого обращения через PHPMyAdmin
    С уважением!

  2. Максим

    Здравствуйте, подскажите пожалуйста, как сделать так, что бы id метки был переменной и брал свое значение из другой таблицы в этой же БД??

    И второй вопрос, если реализовать присвоение id=»значение из другой таблицы БД», учитывая что значения меняться не будет, будет ли перезаписываться метка?или будет довавляться новая с тем же id?

  3. Alexthe

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

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

    Заранее спасибо!

  4. Alexthe

    В приведенном примере не записываются данные в базу данных почему-то

  5. Alexthe

    В базу записывается нормально, моя ошибка была, все отлично

  6. Max

    А как реализовать данный пример для собственного слоя карты, я заменяю код
    //Определение начальных параметров карты
    function init () {
    myMap = new ymaps.Map(«map», {
    center: [56.326944, 44.0075],
    zoom: 13
    }, {
    balloonMaxWidth: 600
    });
    на код отображения декадовой карты вот отсюда http://api.yandex.ru/maps/doc/jsapi/2.x/examples/ship-map.html
    метки при этом в базу данных записываются, но не отображаются, при этом в предущем примере (Яндекс.Карта на Вашем сайте с возможностью добавления меток пользователями — API Яндекс.Карт v2.x Продолжение) если использовать свой слой карты все работает нормально.
    Где изменить код?

  7. Денис

    Здравствуйте. А не подскажете, почему в примере пункту меню «рестораны» не назначается активность?
    И как можно реализовать меню, чтобы оно выглядело как в примере http://webmap-blog.ru/examples/ymap-ymapsml/viv-grups-menu-click.html, то есть при клике на пункт скрывалась/показывалась только та коллекция, которая соответствует этому пункту, не трогая при этом остальные.

  8. Денис

    Насчет активности ресторанов разобрался — в штмл-коде в id пропущена была буква.
    Остальные вопросы в силе.

  9. iegres

    Alexthe что за ошибка была у тебя когда в базу данных незаписывались?

  10. gena

    Подскажите пожалуйста, как в форму защиту добавить. Например captcha?

    И как проверку заполненных полей, а то пустые метки можно сохранить?

  11. gena

    Не могу добавить капчу в форму в своем примере.
    Вот в этот код. Помогите?
    Название:
    Подсказка:
    Балун:

  12. Антон

    Пример с архива не срабатывает. Оформление полей ввода информации о метке не имеет стилей, в базу не сохраняются. Ошибок не вылазит, с базой всё связано правильно…

  13. Антон

    И на всякий уточню, что пробовал запустить как на локальной машине, так и на хостинге.

    Вот тут Ваш архив развернут + настройки в файле bd.php прописаны, что не так?
    http://anton2.ru/uch/index-4.html

  14. Василий

    Антон тебе же говорит сервер, нет файла addmetki-cat.php и указывает путь где он должен находится.
    *(целый месяц прошел уже))

Добавить комментарий для Денис Отменить ответ

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