E
E
Elena2015-03-12 20:04:16
Yandex maps
Elena, 2015-03-12 20:04:16

The appearance of a balloon in a cluster?

Task: depending on the choice of the store, display the city where the store is located and open the balloon. It's just that it can't be opened.

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();
                        });
                    });
                }

As in code
$(document).on('click', '.city-info li', function () {
                            var object = geoObjects[$(this).closest('li').index()];
                            myMap.setCenter(object.geometry.getCoordinates(), 11);
                            object.balloon.open();
                        });

should I open the balloon?
PS These are clusters

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question