Я продолжаю рассказ начатый в заметке «Добавление меток пользователями через отдельную форму — 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;
} |
Смотрим, что у нас получилось.
В заключении всем тем, кто интересуется тем, как организовать добавление меток пользователями на Яндекс.Карту, я подготовил бесплатную книгу, загрузить её можно здесь.
Далее я планирую продолжить данную тему и рассказать о том, как можно сделать редактирование уже добавленных меток.