Добавление меток пользователями через отдельную форму по категориям — API Яндекс.Карт v2.x

Автор: | 01.12.2013

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

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

За основу возьмем код из уже упомянутой заметки «Добавление меток пользователями через отдельную форму — API Яндекс.Карт v2.x».

А также код файлов addmetki-cat.php и vivodpointsmap-cat.php из заметки «Добавляем новую категорию».

С начала изменим код файла index.html.

Заменим код для SELECT и значков меток на следующий:

<div class="form-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: 30px"></span>
<select name="image" id="image" class="form-control">
<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>
<option data-path="http://api.yandex.ru/maps/doc/jsapi/2.x/ref/images/styles/theater.png" value="twirl#theaterIcon">Театр</option>
</select></div>

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

<div id="buttoncat">
<a href="#bar" class="btn btn-primary btn-primary" onclick="show_c('bar'); return false;">Бар</a>
<a href="#restaurant" class="btn btn-primary btn-primary" onclick="show_c('restauraunt'); return false;">Ресторан</a>
<a href="#cafe" class="btn btn-primary btn-primary" onclick="show_c('cafe'); return false;">Кафе</a>
<a href="#theater" class="btn btn-primary btn-primary"  onclick="show_c('theater'); return false;">Театр</a>
</div>

Теперь изменяем javascript файл yandexmap.js формирования карты.

В глобальные переменные добавляем следующие:

myCollection — коллекции меток;
MyBalloonContentLayoutClass — шаблон данных для балуна.

Редактируем код функции init.

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

myCollection = new ymaps.GeoObjectCollection();

Удаляем var из строки

var MyBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass(

Далее удаляем код вывода меток:

$.getJSON("vivodpointsmap.php",
function(json){
for (i = 0; i < json.markers.length; i++) {
 
var myPlacemark = new ymaps.Placemark([json.markers[i].lat,json.markers[i].lon], {
	name: json.markers[i].icontext,
	description: json.markers[i].balloontext,			    
    hintContent: json.markers[i].hinttext
	},{
	balloonContentLayout: MyBalloonContentLayoutClass,
	preset: json.markers[i].styleplacemark
	}); 	
 
  // Добавляем метку на карту
  myMap.geoObjects.add(myPlacemark);
}
 
});

И добавляем новую функцию вывода меток для отдельной категории:

function show_c(c){		
 
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],
	{
		name: json.markers[i].name,
		description: json.markers[i].balloontext,			
        hintContent: json.markers[i].hinttext
		},{
		balloonContentLayout: MyBalloonContentLayoutClass,
		preset: json.markers[i].styleplacemark
		}); 			
		myCollection.add(myPlacemark);
 
	}
	myMap.geoObjects.add(myCollection);
});
 
return false;
 
}

Смотрим, что у нас получилось.

Добавление меток пользователями через отдельную форму по категориям — API Яндекс.Карт v2.x

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

Загрузить архив с примером

В заключении всем тем, кто интересуется тем, как организовать добавление меток пользователями на Яндекс.Карту, я подготовил бесплатную книгу, загрузить её можно здесь.

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

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

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