ymaps.ready(init);
function init () {
var myMap = new ymaps.Map('map', {
center: [55.76, 37.64],
zoom: 10
}, {
searchControlProvider: 'yandex#search'
}),
objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: true,
// ObjectManager принимает те же опции, что и кластеризатор.
gridSize: 32,
clusterDisableClickZoom: true
});
// Контекстное меню, позволяющее изменить параметры метки.
// Вызывается при нажатии правой кнопкой мыши на метке.
myMap.events.add('click', function (e) {
// Если меню метки уже отображено, то убираем его.
if ($('#menu').css('display') == 'block') {
$('#menu').remove();
} else {
// HTML-содержимое контекстного меню.
var menuContent =
'<div id="menu">\
<ul id="menu_list">\
<li>Номер дома: <br /> <input type="text" name="icon_text" /></li>\
<li>Квартира: <br /> <input type="text" name="hint_text" /></li>\
<li>Стоимость: <br /> <input type="text" name="balloon_text" /></li>\
</ul>\
<div align="center"><input type="submit" value="Сохранить" /></div>\
</div>';
var placemark = new ymaps.Placemark(e.get('coords'), {
}, {
// Красная иконка, растягивающаяся под содержимое.
preset: "islands#redStretchyIcon"
});
//передача координат щелчка
var coords = e.get('coords');
$('#marker_koords').val(
[
coords[0].toPrecision(6),
coords[1].toPrecision(6)
].join(', '));
$('body').append(menuContent);
// Задаем позицию меню.
$('#menu').css({
left: e.get('pagePixels')[0],
top: e.get('pagePixels')[1]
});
// При нажатии на кнопку "Сохранить" изменяем свойства метки
// значениями, введенными в форме контекстного меню.
$('#menu input[type="submit"]').click(function () {
placemark.properties.set({
balloonContentHeader: $('input[name="icon_text"]').val(),
balloonContentFooter: $('input[name="hint_text"]').val(),
balloonContentBody: $('input[name="balloon_text"]').val()
});
myMap.geoObjects.add(placemark);
// Удаляем контекстное меню.
$('#menu').remove();
});
}
});
// Чтобы задать опции одиночным объектам и кластерам,
// обратимся к дочерним коллекциям ObjectManager.
objectManager.objects.options.set('preset', 'islands#greenDotIcon');
objectManager.clusters.options.set('preset', 'islands#greenClusterIcons');
myMap.geoObjects.add(objectManager);
$('#addMarkers').bind('click', addMarkers);
function addMarkers () {
$.ajax({
url: "data.json"
}).done(function (data) {
objectManager.add(data);
});
}
$('#addMarkers2').bind('click', addMarkers2);
function addMarkers2 () {
$.ajax({
url: "data2.json"
}).done(function (data) {
objectManager.add(data);
});
}
}