Как инициализировать несколько яндекс карт и подогнать масштаб из скрытого контейнера?

Question

[Игорь Пушкарский]

Всем привет!

В общем проблема такая, нужно инициализировать одновременно несколько карт пришедших с бекенда, некоторые карты видны сразу на экране, некоторые получаются скрыты под табами.

То есть если первый таб отрабатывает нормально, который виден в данный момент, то второй таб не хочет масштабироваться никое образом. и показывает вот что а первый показывает вот что

По факту обе карты одинаковые для теста, только заменен контейнер.
И еще я заметил что zoom вообще не воспринимается картой.

$(document).ready(function(){

    /**
     * Подключаемся к яндекс карты API 2.0
     */

    var maps =[
        {
            'name' : 'addressMap1',
            'center' : [50.443705, 30.530946],
            'zoom' :  10,
            'controls' : ['smallMapDefaultSet'],
            'elemClicking' : 'address__list-item-name-title',
            'arrayObjects' : [
                {
                    id: "235",
                    iconImageHref: "img/pin-blue.png",
                    iconLayout: "default#image",
                    iconImageSize: [30, 42],
                    center: [50.426472, 30.563022],
                    name: "м. Старая Деревня",
                    address: "бул. Трудящихся, д.18, к.1",
                    phone: "[phone]",
                    timeWork: "9:00–22:00",
                    location: "https://company.yandex.ru/",
                    power: "Откр. 0,5 Тл и закр. 1,5 Тл"
                },
                {
                    id: "236",
                    iconImageHref: "img/pin-blue.png",
                    iconLayout: "default#image",
                    iconImageSize: [30, 42],
                    center: [50.426472, 31.563022],
                    name: "м. Старая Деревня2",
                    address: "бул. Трудящихся, д.18, к.1",
                    phone: "[phone]",
                    timeWork: "9:00–20:00",
                    location: "https://company.yandex.ru/",
                    power: "Откр. 0,5 Тл и закр. 1,5 Тл"
                }
            ]
        },
        {
            'name' : 'addressMap2',
            'center' : [50.443705, 30.530946],
            'zoom' :  10,
            'controls' : ['smallMapDefaultSet'],
            'elemClicking' : 'address__list-item-name-title',
            'arrayObjects' : [
                {
                    id: "235",
                    iconImageHref: "img/pin-blue.png",
                    iconLayout: "default#image",
                    iconImageSize: [30, 42],
                    center: [50.426472, 30.563022],
                    name: "м. Старая Деревня",
                    address: "бул. Трудящихся, д.18, к.1",
                    phone: "[phone]",
                    timeWork: "9:00–22:00",
                    location: "https://company.yandex.ru/",
                    power: "Откр. 0,5 Тл и закр. 1,5 Тл"
                },
                {
                    id: "236",
                    iconImageHref: "img/pin-blue.png",
                    iconLayout: "default#image",
                    iconImageSize: [30, 42],
                    center: [50.426472, 31.563022],
                    name: "м. Старая Деревня2",
                    address: "бул. Трудящихся, д.18, к.1",
                    phone: "[phone]",
                    timeWork: "9:00–20:00",
                    location: "https://company.yandex.ru/",
                    power: "Откр. 0,5 Тл и закр. 1,5 Тл"
                }
            ]
        }
    ] ;

    ymaps.ready(init);

    function init() {

        for (var elem = 0, length = maps.length; elem < length; elem++) {

            /*Приходящие данные*/
            var arrayObjects = maps[elem].arrayObjects;

            /**
             * Создаем экземпляр карты
             * @type {string} addressMap - Id блока куда вставлять карту
             */

            var myMap = [];
            myMap[elem] = new ymaps.Map(maps[elem].name, {
                center: maps[elem].center,
                zoom: maps[elem].zoom,
                controls: maps[elem].controls
            });

            /**
             * Создаем колекцию в которую будем писать гео-элементы на карте
             * @type {ymaps.GeoObjectCollection}
             */
            var collection = new ymaps.GeoObjectCollection();

            /**
             * Сюда запишем все точки на карте
             * @type {Array}
             */
            var placemarks =[];

            for (var i = 0, l = arrayObjects.length; i < l; i++) {

                /*Добавляем на карту колекцию геообъектов*/
                myMap[elem].geoObjects.add(collection);

                //Создаем балун по данным arrayObjects
                placemarks[arrayObjects[i].id] = new ymaps.Placemark(
                    arrayObjects[i].center,
                    {
                        balloonContent: [
                            '<address>',
                            '<strong>'+arrayObjects[i].name+'</strong>',
                            '<br/>',
                            arrayObjects[i].address,
                            '<br/>',
                            arrayObjects[i].phone,
                            '<br/>',
                            arrayObjects[i].timeWork,
                            '<br/>',
                            '<a href="'+arrayObjects[i].timeWork+'">Схема проезда</a>',
                            '</address>'
                        ].join('')
                    },
                    {
                        iconLayout: 'default#image',
                        iconImageHref: arrayObjects[i].iconImageHref,
                        iconImageSize: arrayObjects[i].iconImageSize,
                        iconImageOffset: arrayObjects[i].iconImageOffset
                    }
                );

                /*Добавляем в колекцию наши балуны*/
                collection.add(placemarks[arrayObjects[i].id]);
            }

            /* Подписываемся на событие клика по пункту меню */
            $('.'+maps.elemClicking).click(function(){
                var id = $(this).attr('balloon-id');

                myMap[elem].panTo(placemarks[id].geometry.getCoordinates());
                setTimeout(function () {
                    placemarks[id].balloon.open();
                }, 800);
            });

            /* Выставляем масштаб карты чтобы были видны все группы. */
            myMap[elem].setBounds(myMap[elem].geoObjects.getBounds());

        }
    }

});

Comments

[Игорь Пушкарский]

Понять не могу почему вот тут https://yadi.sk/i/QXUq6artngKg5, myMap не доступна

[Игорь Пушкарский]

В общем понял что проблема вот в чем myMap.setBounds(myMap.geoObjects.getBounds()); оно масштабирует только первую карту в массиве, остальные тупо переводит к минимальному масштабу.

Answer 1

[Игорь Пушкарский]

В общем вроде нашел решение, но вся же готов к предложениям.

По поводу масштаба это из-за того, что размер контейнера для карты имеет display:none; карта считает что размер карты 0, и скидывает масштаб в 0. В итоге поигрался с css, вроде все работает.

$(document).ready(function(){

    /*Приходящие данные*/
    var maps =[
        {
            'id' : 1,
            'name' : 'addressMap1',
            'center' : [50.443705, 30.530946],
            'zoom' :  10,
            'controls' : ['smallMapDefaultSet'],
            'elemClicking' : 'address__list-item-name-title',
            'points' : [
                {
                    id: "235",
                    iconImageHref: "img/pin-blue.png",
                    iconLayout: "default#image",
                    iconImageSize: [30, 42],
                    center: [50.426472, 30.563022],
                    name: "м. Старая Деревня",
                    address: "бул. Трудящихся, д.18, к.1",
                    phone: "[phone]",
                    timeWork: "9:00–22:00",
                    location: "https://company.yandex.ru/",
                    power: "Откр. 0,5 Тл и закр. 1,5 Тл"
                },
                {
                    id: "236",
                    iconImageHref: "img/pin-blue.png",
                    iconLayout: "default#image",
                    iconImageSize: [30, 42],
                    center: [50.426472, 31.563022],
                    name: "м. Старая Деревня2",
                    address: "бул. Трудящихся, д.18, к.1",
                    phone: "[phone]",
                    timeWork: "9:00–20:00",
                    location: "https://company.yandex.ru/",
                    power: "Откр. 0,5 Тл и закр. 1,5 Тл"
                }
            ]
        },
        {
            'id' : 2,
            'name' : 'addressMap2',
            'center' : [50.443705, 30.530946],
            'zoom' :  10,
            'controls' : ['smallMapDefaultSet'],
            'elemClicking' : 'address__list-item-name-title',
            'points' : [
                {
                    id: "237",
                    iconImageHref: "img/pin-blue.png",
                    iconLayout: "default#image",
                    iconImageSize: [30, 42],
                    center: [50.426472, 30.563022],
                    name: "м. Старая Деревня",
                    address: "бул. Трудящихся, д.18, к.1",
                    phone: "[phone]",
                    timeWork: "9:00–22:00",
                    location: "https://company.yandex.ru/",
                    power: "Откр. 0,5 Тл и закр. 1,5 Тл"
                },
                {
                    id: "238",
                    iconImageHref: "img/pin-blue.png",
                    iconLayout: "default#image",
                    iconImageSize: [30, 42],
                    center: [55.751574, 37.573856],
                    name: "м. Старая Деревня2",
                    address: "бул. Трудящихся, д.18, к.1",
                    phone: "[phone]",
                    timeWork: "9:00–20:00",
                    location: "https://company.yandex.ru/",
                    power: "Откр. 0,5 Тл и закр. 1,5 Тл"
                }
            ]
        }
    ] ;

    var myMap=[];
    var myMapWrap = [];
    var placemarks =[];

    /*Иницилизируем карты*/
    ymaps.ready(init);

    function init() {

        for (var elem = 0, length = maps.length; elem < length; elem++) {

            var points = maps[elem].points;

            var collection = new ymaps.GeoObjectCollection();

            myMap[elem] = new ymaps.Map(maps[elem].name, {
                center: maps[elem].center,
                zoom: maps[elem].zoom,
                controls: maps[elem].controls
            });

            for (var i = 0, l = points.length; i < l; i++) {

                /*Добавляем на карту колекцию геообъектов*/
                myMap[elem].geoObjects.add(collection);

                //Создаем балун по данным points

                placemarks[points[i].id] = new ymaps.Placemark(
                    points[i].center,
                    {
                        balloonContent: [
                            '<address>',
                            '<strong>'+points[i].name+'</strong>',
                            '<br/>',
                            points[i].address,
                            '<br/>',
                            points[i].phone,
                            '<br/>',
                            points[i].timeWork,
                            '<br/>',
                            '<a href="'+points[i].timeWork+'">Схема проезда</a>',
                            '</address>'
                        ].join('')
                    },
                    {
                        iconLayout: 'default#image',
                        iconImageHref: points[i].iconImageHref,
                        iconImageSize: points[i].iconImageSize,
                        iconImageOffset: points[i].iconImageOffset
                    }
                );

                /*Добавляем в колекцию наши балуны*/
                collection.add(placemarks[points[i].id]);
            }

            myMapWrap[elem]=myMap[elem];
            myMapWrap[elem].setBounds(myMapWrap[elem].geoObjects.getBounds());
        }
    }

    $('.'+maps[0].elemClicking).click(function(){
        var id = $(this).attr('balloon-id');
        mapId = $(this).attr('map-id');

        //Центруем карту
        myMapWrap[mapId].panTo(placemarks[id].geometry.getCoordinates());

        //Показываем балун как только отцентруется карта
        setTimeout(function () {
            placemarks[id].balloon.open();
        }, 800);
    });


});

Answer 2

[forgotten]

learn.javascript.ru/closures

Comments

[Игорь Пушкарский]

Подскажите как быть с масштабированием если без display nonе не обойтись?

[forgotten]

https://tech.yandex.ru/maps/jsbox/2.1/fillcontainer

[Игорь Пушкарский]

Почему то не всегда срабатывает, даже с задержкой в 1 секунду.