Задача: в зависимости от выбора магазин выводить город расположения магазина и открывать балун. Вот как раз его открыть и не получается.
var mas = JSON.parse($('#parse_mas_0').html());
var mas1 = <?=$masiv?>;
// Дождёмся загрузки API и готовности DOM.
ymaps.ready(init);
function init() {
var myMap;
if (!myMap) {
// Создание экземпляра карты и его привязка к контейнеру с
// заданным id ("map").
myMap = new ymaps.Map('map', {
// При инициализации карты обязательно нужно указать
// её центр и коэффициент масштабирования.
center: [55.76, 37.64], // Москва
zoom: 10,
behaviors: ['default', 'scrollZoom'],
controls: ['zoomControl', 'typeSelector']
});
if ($('#parse_mas')) {
/**
* Создадим кластеризатор, вызвав функцию-конструктор.
* Список всех опций доступен в документации.
* @see http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#constructor-summary
*/
clusterer = new ymaps.Clusterer({
/**
* Через кластеризатор можно указать только стили кластеров,
* стили для меток нужно назначать каждой метке отдельно.
* @see http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage.xml
*/
preset: 'islands#circleDotIcon',
/**
* Ставим true, если хотим кластеризовать только точки с одинаковыми координатами.
*/
groupByCoordinates: false,
/**
* Опции кластеров указываем в кластеризаторе с префиксом "cluster".
* @see http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Cluster.xml
*/
clusterDisableClickZoom: true,
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false
}),
/**
* Функция возвращает объект, содержащий данные метки.
* Поле данных clusterCaption будет отображено в списке геообъектов в балуне кластера.
* Поле balloonContentBody - источник данных для контента балуна.
* Оба поля поддерживают HTML-разметку.
* Список полей данных, которые используют стандартные макеты содержимого иконки метки
* и балуна геообъектов, можно посмотреть в документации.
* @see http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointData = function (index) {
return {
balloonContentBody: mas1[index],
clusterCaption: mas1[index]
};
},
/**
* Функция возвращает объект, содержащий опции метки.
* Все опции, которые поддерживают геообъекты, можно посмотреть в документации.
* @see http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoObject.xml
*/
getPointOptions = function () {
return {
preset: 'islands#Icon'
};
},
points = mas,
geoObjects = [];
/**
* Данные передаются вторым параметром в конструктор метки, опции - третьим.
* @see http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark.xml#constructor-summary
*/
var coord = [];
for (var i = 0, len = points.length; i < len; i++) {
coord = [];
coord[0] = parseFloat(points[i].split(',')[0]);
coord[1] = parseFloat(points[i].split(',')[1]);
geoObjects[i] = new ymaps.Placemark(coord, getPointData(i), getPointOptions());
}
/**
* Можно менять опции кластеризатора после создания.
*/
clusterer.options.set({
gridSize: 80,
clusterDisableClickZoom: true
});
/**
* В кластеризатор можно добавить javascript-массив меток (не геоколлекцию) или одну метку.
* @see http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Clusterer.xml#add
*/
clusterer.add(geoObjects);
myMap.geoObjects.add(clusterer);
/**
* Спозиционируем карту так, чтобы на ней были видны все объекты.
*/
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
}
}
//TODO: выбор магазина в таблице и показ его на карте
$(document).ready(function () {
$(document).on('click', '.city-info li', function () {
var object = geoObjects[$(this).closest('li').index()];
myMap.setCenter(object.geometry.getCoordinates(), 11);
object.balloon.open();
});
});
}
Как в коде
$(document).on('click', '.city-info li', function () {
var object = geoObjects[$(this).closest('li').index()];
myMap.setCenter(object.geometry.getCoordinates(), 11);
object.balloon.open();
});
мне открыть балун?
P.S. Это кластеры
Простой
Простой