Доброго времени суток.
Делаю проект, карта городов, в каждом городе есть много организаций, у каждой организации есть описание и еще некоторые данные.
Использую карту яндекс и кластеризацию.
Я сделал таблицу objects в которой есть поля name, latitude, longitude, description
Я смог сделать что бы координаты организаций брались из таблицы и исходя из этого маркеры кластеризуются на карте.
Но у меня не получается сделать что бы при щелчке уже на конкретный маркер, в тоолтипе отображались данные из таблицы из полей name, description.
Вот код который формирует балуны меток:
var getPointData = function (index) {
return {
balloonContentBody: 'балун <strong>метки ' + index + '</strong>',
clusterCaption: 'метка <strong>' + index + '</strong>'
};
}
Сейчас по щелчку на маркер, выводится сообщение балун метки + его индекс, это 1, 2, и т.д.
Подскажите пожалуйста как реализовать что бы данные брались из таблицы objects?
Вот код во вьюшке:
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [48.548043,66.904544],
zoom: 15
}, {
searchControlProvider: 'yandex#search'
}),
clusterer = new ymaps.Clusterer({
preset: 'islands#invertedVioletClusterIcons',
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false
});
/**
* Кластеризатор расширяет коллекцию, что позволяет использовать один обработчик
* для обработки событий всех геообъектов.
* Меняю цвет иконок и кластеров при наведении.
*/
clusterer.events
// Слушаю сразу несколько событий, указывая их имена в массиве.
.add(['mouseenter', 'mouseleave'], function (e) {
var target = e.get('target'),
type = e.get('type');
if (typeof target.getGeoObjects != 'undefined') {
// Событие произошло на кластере.
if (type == 'mouseenter') {
target.options.set('preset', 'islands#invertedPinkClusterIcons');
} else {
target.options.set('preset', 'islands#invertedVioletClusterIcons');
}
} else {
// Событие произошло на геообъекте.
if (type == 'mouseenter') {
target.options.set('preset', 'islands#pinkIcon');
} else {
target.options.set('preset', 'islands#violetIcon');
}
}
});
var getPointData = function (index) {
return {
balloonContentBody: 'балун <strong>метки ' + index + '</strong>',
clusterCaption: 'метка <strong>' + index + '</strong>'
};
},
getPointOptions = function () {
return {
preset: 'islands#violetIcon'
};
},
points = [
@foreach($objects as $object)
[
{{ $object->latitude.','.$object->longitude }}
],
@endforeach
],
geoObjects = [];
for(var i = 0, len = points.length; i < len; i++) {
geoObjects[i] = new ymaps.Placemark(points[i], getPointData(i), getPointOptions());
}
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
});