Клуб API Карт

Макет балуна кластера "Две колонки"

Александр
7 июля 2014, 15:38

Немного доработал этот макет и сделал справа кнопку по нажатию которой пользователю должен центрироваться объект, выбранный слева.

 

Но никак не могу понять как получить по кнопке координаты выделенного.

В примере "Собственный макет балуна кластера"

делается вот так 

jQuery(document).on( "click", "a.list_item", function() {}

, но я не понял как это применить к моей задаче (((

 

сайта нет, вот файл https://yadi.sk/d/nLty1-FBW7SfE

 

7 комментариев

Дописала в файле https://yadi.sk/d/7vkk_wP8W8gBy

Александр
8 июля 2014, 08:35

спасибо

Событие на клик можно повесить через:

 

yandexMapClusterer.balloon.events.add('click', function (event) {
            var target = event.get('target');
        });

 

Вот только так и не разобрался, как через target обратиться к выбранному геообъекту.

Вы просто дополнили прошлый ответ или у вас вопрос, как обратиться к объекту?

Вопрос.

 

Ничего умнее таких вот jquery макарон не придумал (смотреть на событие $(document).on('click', 'ymaps.ymaps-b-cluster-tabs__menu-item,...... )

 

 

 

    var initYandexMap = function() {
        yandexMap = new ymaps.Map('map', {
            center: [55.755768, 37.617671],
            zoom: 10,
            controls: ['zoomControl']
        });

        var MyBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass(
            '{{ properties.name }}' +
            '

Адрес: {{ properties.address }}

' +
            '{% if properties.description %}

Описание: {{ properties.description }}

{% endif %}'
        );
        ymaps.layout.storage.add('my#simplestBCLayout', MyBalloonContentLayoutClass);

        var customBalloonContentLayout = ymaps.templateLayoutFactory.createClass([
            '
    '
,
            '{% for geoObject in properties.geoObjects %}',
            '
  • {{ geoObject.properties.name|raw }}
  • ',
                '{% endfor %}',
                ''
            ].join(''));

            var customItemContentLayout = ymaps.templateLayoutFactory.createClass([
                '$[properties.name]',
                '

    Адрес: $[properties.address]

    ',
                '

    Описание: $[properties.description]

    '
            ].join(''));

            yandexMapClusterer = new ymaps.Clusterer({
                //preset: 'islands#redClusterIcons',
                //clusterBalloonContentLayout: customBalloonContentLayout,
                clusterBalloonItemContentLayout: customItemContentLayout,
                clusterBalloonMaxHeight: 250,
                clusterBalloonPanelMaxMapArea: 0
            });
            yandexMapClusterer.options.set({
                gridSize: 64,
                minClusterSize: 2,
                margin: 20,
                zoomMargin: 50
            });

            $(document).on('click', 'ymaps.ymaps-b-cluster-tabs__menu-item, span.listClustererItem', function(event) {
                event.stopPropagation();

                var yandexMapObjectsLength = yandexMapObjects.filter(function(element){ return element !== undefined; }).length;
                var parentItem = $(this).parent();
                var tagName = $(this).prop('tagName');
                var elementId = (tagName == 'SPAN' ? $(this) : $(this).find('span.listClustererItem')).data().id

                for (var i = 0; i < yandexMapObjectsLength; i++) {
                    var geoObject = yandexMapObjects[i];

                    if (geoObject.properties.get('id') == elementId) {
                        var objectState = yandexMapClusterer.getObjectState(geoObject);

                        if (objectState.isClustered) {

                            if (tagName == 'SPAN') {
                                objectState.cluster.state.set('activeObject', geoObject);
                                parentItem.trigger('click');
                            }
                        }

                        $('.selectedOrderPickup').select2('val', geoObject.properties.get('id'));

                        return false;
                    }
                }

                return false;
            });
        }


    И сам же нашел решение.

     

     clusterer.events
            .add('balloonopen', function (event) {
               activeObjectMonitor = new ymaps.Monitor(event.get('cluster').state);
               activeObjectMonitor.add('activeObject', function (newValue, oldValue) {
                   console.log('selected', newValue);
               });
            })

    Да, этот вариант изящнее)