Клуб API Карт

одна из иконок кластера отображается криво

d.andrushchenko
4 апреля 2013, 17:23

http://piccy.info/view3/4382503/ef9d13f6ca209a675d1367ad7a4b6e6b/

шаблон для иконки кластера один, а вот отображаются они по разному?! (иконка с права сьежает и под ней видно стандартную иконку балуна) Как сделать так чтобы иконка с права отображалась нормально?!

 

// макет иконки кластера

                                    var MyIconClusterContentLayout = ymaps.templateLayoutFactory.createClass("", {

                                        build: function() {

                                            MyIconClusterContentLayout.superclass.build.call(this);

                                            var parent = this.getParentElement(),

                                                content = "Визиты ",

                                            geoObjects = this.getData().properties.get('geoObjects');

 

                                            // формируем массив из "периодов-визитов" для отображения в метке кластера

                                            var ind, c, gr = [];

                                            for (var i = 0; i < geoObjects.length; i++) {

                                                if (geoObjects[i].properties.get('myProp') - 1 == 0) {

                                                    c = ind = geoObjects[i].properties.get('myProp');

                                                    gr[c] = [];

                                                    gr[c].push(c);

                                                    continue;

                                                }

                                                if (geoObjects[i].properties.get('myProp') - 1 == c) {

                                                    gr[ind].push(geoObjects[i].properties.get('myProp'));

                                                    c = geoObjects[i].properties.get('myProp');

                                                } else {

                                                    c = ind = geoObjects[i].properties.get('myProp');

                                                    gr[c] = [];

                                                    gr[c].push(c);

                                                }

                                            }

 

                                            for (var start in gr) {

                                                if (gr[start].length == 1) {

                                                    var single = Math.min.apply({},gr[start]);

                                                    content += '<b>' + single + '</b>' + ', ';

                                                    continue;

                                                }

                                                var min = Math.min.apply({},gr[start]);

                                                var max = Math.max.apply({},gr[start]);

                                                content += '<b>' + min + '-' + max + '</b>' + ", ";

                                            }

 

                                            content = content.substr(0, content.length - 2);

                                            content = '<div style="background-color:white; min-width:180px; height:45px; border-radius:30; box-shadow:0px 0px 6px 2px darkviolet; -webkit-box-shadow:0px 0px 6px 2px darkviolet;">' + content + '</div>';

                                            parent.innerHTML = content;

                                        },

                                        clear: function() {

                                            parent.innerHTML = '';

                                        }

                                    });

 

                                    // создание кластера

                                    cluster = new ymaps.Clusterer({

                                        clusterDisableClickZoom: true,

                                        clusterIconContentLayout: MyIconClusterContentLayout,

                                        clusterHideIconOnBalloonOpen: true,

                                    });

 

                                    cluster.add(collection);

                                    myMap.geoObjects.add(cluster);

 

7 комментариев
Подписаться на комментарии к посту

и еще прошу ответить как сделать иконку метки резиновой под контент, стандартными методами не получается

Наши "резиновые" метки являются резиновыми за счет верстки. Так что никаких стандартных решений в апи по созданию пользовательских тянущихся меток нет. Вам в любом случае придется прописывать стили для своих новых меток самостоятельно.

уберите, пожалуйста, ваш код под кат.

убрал

Вы задаете clusterIconContentLayout, задавайте clusterIconLayout, тогда у вас перестанут рисоваться старые метки кластера под вашими макетами.

спасибо!

подскажите пожалуйста как отцентрировать метку балуна (у меня она не по центру фактического местонахождения точки находится) в моем коде

Вариант 1. Вы сами в верстке задаете позиционирование таким образом, чтобы картинка была смещена влево и вверх.

Вариант 2. Вы в принципе можете воспользоваться нашим стандартным макетом http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/layout.ImageWithContent.xml. Туда можно передать картинку и ее смещение.