На страницах своего блога я рассказывал о том, как можно реализовать добавление меток пользователями и вывод по категориям, используя 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
Отличный пример! Спасибо!
Хотелось бы также иметь возможность Админу сайта удалять/редактировать без прямого обращения через PHPMyAdmin
С уважением!
Здравствуйте, подскажите пожалуйста, как сделать так, что бы id метки был переменной и брал свое значение из другой таблицы в этой же БД??
И второй вопрос, если реализовать присвоение id=»значение из другой таблицы БД», учитывая что значения меняться не будет, будет ли перезаписываться метка?или будет довавляться новая с тем же id?
Если была бы возможность — то можно было бы совместить — вывод по категориям с добавлением и поиск по городу…можете подсказать, как сделать.
Если правильно понимаю, то надо сначала выбрать по городу, а потом проверить на параметр категория и потом выводить, что получилось
Заранее спасибо!
В приведенном примере не записываются данные в базу данных почему-то
В базу записывается нормально, моя ошибка была, все отлично
А как реализовать данный пример для собственного слоя карты, я заменяю код
//Определение начальных параметров карты
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 Продолжение) если использовать свой слой карты все работает нормально.
Где изменить код?
Здравствуйте. А не подскажете, почему в примере пункту меню «рестораны» не назначается активность?
И как можно реализовать меню, чтобы оно выглядело как в примере http://webmap-blog.ru/examples/ymap-ymapsml/viv-grups-menu-click.html, то есть при клике на пункт скрывалась/показывалась только та коллекция, которая соответствует этому пункту, не трогая при этом остальные.
Насчет активности ресторанов разобрался — в штмл-коде в id пропущена была буква.
Остальные вопросы в силе.
Alexthe что за ошибка была у тебя когда в базу данных незаписывались?
Подскажите пожалуйста, как в форму защиту добавить. Например captcha?
И как проверку заполненных полей, а то пустые метки можно сохранить?
Не могу добавить капчу в форму в своем примере.
Вот в этот код. Помогите?
Название:
Подсказка:
Балун:
Пример с архива не срабатывает. Оформление полей ввода информации о метке не имеет стилей, в базу не сохраняются. Ошибок не вылазит, с базой всё связано правильно…
И на всякий уточню, что пробовал запустить как на локальной машине, так и на хостинге.
Вот тут Ваш архив развернут + настройки в файле bd.php прописаны, что не так?
http://anton2.ru/uch/index-4.html
Антон тебе же говорит сервер, нет файла addmetki-cat.php и указывает путь где он должен находится.
*(целый месяц прошел уже))