Клуб API Карт

Приплюснутость значка кластера и некорректность getBounds() кластера

Пост в архиве.

Видео: http://screencast.com/t/t6Qa1sKkyy

 

1. В FF, Opera, IE значки кластера приплюснуты, хотя SVG изначально круг, вписанный в квадрат (первый эпизод). В Google Chrome все хорошо (второй эпизод).

Что может приплюснуть?

 

        if(!window.customItemContentLayout){
                // Создаем собственный макет с информацией о выбранном геообъекте.
                window.customItemContentLayout = ymaps.templateLayoutFactory.createClass(
                // Флаг "raw" означает, что данные вставляют "как есть" без экранирования html.
                        '<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>' +
                        '<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>' +
                        '<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>'
                );
        }

 

        if(!window.clusterer){
                window.clusterer = new ymaps.Clusterer({
                        clusterIcons: [{
                                href: '/images/ico_group_marker.svg',
                                size: [40, 40],
                                offset: [-20, -20],
                                shape: new ymaps.shape.Circle(new ymaps.geometry.pixel.Circle([0, 0], 20))
                        }],
                        clusterDisableClickZoom: true,
                        clusterOpenBalloonOnClick: true,
                        // Устанавливаем стандартный макет балуна кластера "Карусель".
                        clusterBalloonContentLayout: 'cluster#balloonCarousel',
                        // Устанавливаем собственный макет.
                        clusterBalloonItemContentLayout: window.customItemContentLayout,
                        // Устанавливаем режим открытия балуна.
                        // В данном примере балун никогда не будет открываться в режиме панели.
                        clusterBalloonPanelMaxMapArea: 0,
                        // Устанавливаем размеры макета контента балуна (в пикселях).
        //              clusterBalloonContentLayoutWidth: 200,
        //              clusterBalloonContentLayoutHeight: 130,
                        // Устанавливаем максимальное количество элементов в нижней панели на одной странице
                        clusterBalloonPagerSize: 5
                        // Настройка внешего вида нижней панели.
                        // Режим marker рекомендуется использовать с небольшим количеством элементов.
                        // clusterBalloonPagerType: 'marker',
                        // Можно отключить зацикливание списка при навигации при помощи боковых стрелок.
                        // clusterBalloonCycling: false,
                        // Можно отключить отображение меню навигации.
                        // clusterBalloonPagerVisible: false
                });
        }

 

 

2. Либо не разобрался, либо не корректно работает getBounds() (эпизод при клике на пункт меню слева)

 

 

        var items_count = 0;
        window.clusterer.removeAll();
        window.placemarks = [];
        for ( i in addresses_json) {
                placemark = createMarker(addresses_json[i]);
                window.placemarks.push(placemark);
                items_count++;
        }

        window.clusterer.add(window.placemarks);
        map.geoObjects.add(clusterer);

        if(items_count > 0){
                if(items_count > 1)
                        map.setBounds(window.clusterer.getBounds(), {duration:300});
                else
                        map.setCenter(placemark.geometry.getCoordinates(),15,{duration:300});
                // map.update();
                $('.address_link').live('click', function(){
                        window.location = '/materials/'+$(this).attr('material_id')+'/';
                });
        }
        else{
                map.setCenter([0,0], 1, {duration:300});
        }

 

  

По теории при клике на музыку должен был и с Северной Америкой смаштабировать, т.е. метки и в США есть, и clusterer.getBounds() должен был захватить и метки в США, а дал только укрупненно Европу.

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

Кино конечно интересное, но нужна ссылка

Может, я сгущаю краски, но можно Вам в личку, клиент пока не хочет широко светить проект.

 

Как это я могу это сделать?

 

Спасибо, Дмитрий, большое!

 

1. Приплюснутость значков на карте: задаваемый мною SVG файл значка кластера был все-таки не квадратным.

2. Неправильная работа clusterer.getBounds() оказалась из-за того, что координаты меток на карте из json приходили в строковом формате. Предварительное преобразование в число решило проблему:

 

        material.latitude = new Number(material.latitude);
        material.longtitude = new Number(material.longtitude);
        var placemark = new ymaps.Placemark([material.latitude, material.longtitude], {
                balloonContentHeader: material.name,
                balloonContentBody: content
                }, {
                        iconLayout: 'default#image',
                        iconImageHref: "/images/icon_marker.svg"
                }      
        );     

можно проще

var placemark = new ymaps.Placemark([+material.latitude, +material.longtitude], {

                balloonContentHeader: material.name,
                balloonContentBody: content
                }, {
                        iconLayout: 'default#image',
                        iconImageHref: "/images/icon_marker.svg"
                }       
        );