Здравствуйте. Есть множество объектов, они добавлены в кластеры, кластеры на карту. У меток кастомный балун, причем пустой. По клику на метку получаем ид объекта и по нему подгружаем данные балун метки. Как сделать так, чтобы при клике на нераспадающийся кластер, в котором несколько объектов в одной точке, подгружались данные для каждого объекта по айдишникам объектов в кластере и на их основании уже отрисовывался бы балун кластера?
var __map_points = new Array();
//<web:repeater runat="server" datasourcemethod="GetMapP
__map_points[__map_points.length] = {
ID:<web:literal runat="server" property="Id" />,
Longitude:<web:literal runat="server" property="LongitudeValue" />,
Latitude:<web:literal runat="server" property="LatitudeValue" />
}
//</web:placeholder></ite
ymaps.ready(function() {
if (__map_points.length > 0) {
<%--создаем карту--%>
var j_map_holder = $("#div_map_holder");
map = new ymaps.Map(
j_map_holder[0],
{
center: [__map_points[0].Latitude, __map_points[0].Longitude],
zoom: 10
}
);
map.controls.add("zoomControl");
var myBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass(
'<div class="ymaps_baloon_out">' +
'<div class="baloon_title">$[properties.id]</div>'+
'</div>'
);
// Создадим макет правой части балуна кластера.
var MainContentLayout = ymaps.templateLayoutFactory.createClass('', {
build: function() {
// Сначала вызываем метод build родительского класса.
var count = this.getData().cluster.pr
for (var i = 0; i < count; i++) {
var id = this.getData().cluster.pr
ajax_load_placemark(id, object, load_placemark_callback);
}
MainContentLayout.superclass.build.call(this);
// Нужно отслеживать, какой из пунктов левого меню выбран,
// чтобы обновлять содержимое правой части.
this.stateListener = this.getData().state.events.group()
.add('change', this.onStateChange, this);
// Запоминаем текущий активный объект.
this.activeObject = this.getData().state.get('activeObject');
this.applyContent();
},
clear: function() {
if (this.activeObjectLayout) {
this.activeObjectLayout.setParentElement(null);
this.activeObjectLayout = null;
}
// Снимаем слушателей изменения полей.
this.stateListener.removeAll();
// А затем вызываем метод clear родительского класса.
MainContentLayout.superclass.clear.call(this);
},
onStateChange: function() {
// При изменении одного из полей состояния
// проверяем, не сменился ли активный объект.
var newActiveObject = this.getData().state.get('activeObject');
if (newActiveObject != this.activeObject) {
// Если объект изменился, нужно обновить
// содержимое правой части.
this.activeObject = newActiveObject;
this.applyContent();
}
},
applyContent: function() {
if (this.activeObjectLayout) {
this.activeObjectLayout.setParentElement(null);
}
// Чтобы было удобнее формировать текстовый шаблон,
// создадим внутренний макет, в который будем передавать
// модифицированный dataSet.
this.activeObjectLayout = new MainContentSubLayout({
// Поскольку внутренний макет будет отображать
// информацию какого-то геообъекта,
// будем передавать во входном хэше данные и опции
// текущего активного геообъекта.
options: this.options,
properties: this.activeObject.properties
});
// Прикрепляем внутренний макет к внешнему.
this.activeObjectLayout.s
}
});
// Внутрений подмакет правой части балуна кластера.
var MainContentSubLayout = ymaps.templateLayoutFactory.createClass(
// Мы можем использовать поля properties геообъекта,
// так как будем передавать properties в конструктор макета.
'<h3>$[properties.id]</h3>' +
'<div width="100">' +
'$[properties.balloonContentBody]<br>' +
'$[body]' +
'</div>'
);
// Создадим макет для элемента списка в левой части балуна.
ItemLayout = ymaps.templateLayoutFactory.createClass(
'<div class="cluster-balloon-item" [if data.isSelected]style="font-weight: bold;"[endif]>$[properties.id]</div>'
);
var myClusterer = new ymaps.Clusterer({
showInAlphabeticalOrder: true,
clusterBalloonMainContentLayout: MainContentLayout,
clusterBalloonSidebarItemLayout: ItemLayout,
// Настроим ширину левой части балуна кластера
clusterBalloonSidebarWidth: 100,
// и ширину балуна целиком.
clusterBalloonWidth: 300
});
<%--добавляем метки--%>
for (var index = 0; index < __map_points.length; index++) {
var pt = __map_points[index];
var placemark = new ymaps.Placemark(
[pt.Latitude, pt.Longitude],
{
id: pt.ID,
body : "<div>111</div>"
},
{ balloonContentLayout:myBalloonContentLayoutClass }
);
placemark.events.add('click', function(mark) {
var object = mark.get('target');
ajax_load_placemark(object.properties.get('id'), object, load_placemark_callback);
});
}
function load_placemark_callback(data, object) {
if (data) {
var params = ".ymaps_baloon_out";
var content = $(params).append(
'<div class="ymaps_baloon">' +
'<div class="baloon_added"><span class="added">' + data.Added + '</span></div>' +
'<div class="baloon_title"><a href="' + data.Id + '">' + data.Title + '</a></div>' +
'<div class="baloon_image"><a href="' + data.Id + '"><img class="logoImg" src="' + data.ImgUrl + '"/></a></div>' +
'<div class="baloon_text">' +
'<div class="info">' + data.Type + ': <br/><b>' + data.Square + '</b><br/>Стоимость: <br/>' + data.Price + '</div>' +
'<div class="date">Добавлено: ' + data.District + '</div>' +
'</div>' +
'<div class="arrow_b"></div>' +
'<div class="clearfix"></div>' +
'</div>');
object.properties.set('body', content);
}
}
map.geoObjects.add(myClusterer);
<%--если метка всего одна - то определяем, какой максимальный зум для ее координат--%>
if (__map_points.length == 1) {
var coords = [__map_points[0].Latitude, __map_points[0].Longitude];
map.zoomRange.get(coords).then(function(range) {
map.setCenter(coords, range[1], { callback: function() { bind_map_events(map); } });
});
} else {
bind_map_events(map);
}
ymaps.util.bounds.getCent
} else {
$("div.estate_list").addClass("hide_map");
}
});
});
function bind_map_events(map) {
map.events.add('actionend', function() {
var bounds = map.getBounds();
page = 0;
if (items_per_page == 0) items_per_page = 100;
ajax_load_result(bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1], items_per_page, page * items_per_page, window.location.search.substring(1), load_properties_callback);
});
}
function load_properties_callback(data) {
if (data) {
$("#changed_property").ht
$("#changed_property_tabl
if (data.length < items_per_page) {
$("#ShowMoreButton").hide();
} else {
$("#ShowMoreButton").show();
}
}
}
Шаблон балуна кластера не дописан, т.к. я пока не могу понять как туда подгрузить данные. Сделал для теста вывод имеющихся во всех метках ид.
Посмотреть работу можно тут:
http://beta.zakvadrat.ru/search/?city=214