Как сделать на JS API 3.0 Яндекс карт автомасштаб карты при выводе нескольких маркеров?

Question

[System Shock]

Здравствуйте.

Решил попробовать JS API 3.0 для Яндекс карт.

У меня строится карта, на которую добавляется несколько маркеров.
Эти маркеры нужно вместить в область просмотра карты.

В API 2.1 это решалось так:

map.setBounds(myMap.geoObjects.getBounds(),{checkZoomRange:true, zoomMargin:20});

А теперь у карты нет метода setBounds(), нет geoObjects, по доке не особо понятно как решить эту задачу.

Все что мне удалось найти, это map.setLocation({ bounds: boundsArr}), куда я попробовал передать массив из координат всех моих точек. но в итоге показывается карта мира (с максимальным масштабом) почему-то.
Может кто-то сталкивался с такой задачей, как решили?

Вот как я пробовал:

function createMap() {
    await ymaps3.ready;

    // map
    const {
        YMap,
        YMapDefaultSchemeLayer
    } = ymaps3;

    const map = new YMap(
        document.querySelector('.contacts-block-list__map'),
        {
            location: {
                center: (itemsArr.length === 1 ? [itemsArr[0]['coord2'], itemsArr[0]['coord1']] : [37.64, 55.76]), 
                zoom: 16,
            }
        }
    );

    map.addChild(new YMapDefaultSchemeLayer());
    // /map

    // marker default
    const {
        YMapDefaultFeaturesLayer
    } = ymaps3;

    const {
        YMapDefaultMarker,
    } = await ymaps3.import('@yandex/ymaps3-markers@0.0.1');

    const markersLayer = map.addChild(new YMapDefaultFeaturesLayer({zIndex: 1800}));
    const boundsArr = [];

    itemsArr.forEach((item, key) => {    
        const defaultMarker = new YMapDefaultMarker({
            coordinates: [item['coord2'], item['coord1']],
            title: `<div class="ymap-title">${item['title_h1']}</div>`,
            subtitle: `<div class="ymap-subtitle">${item['adress_text']}</div>`,
            color: 'blue',
        });

        markersLayer.addChild(defaultMarker);
        boundsArr.push([item['coord2'], item['coord1']]);
    });
    // /marker default

    if(itemsArr && itemsArr.length > 1){
        // myMap.setBounds(myMap.geoObjects.getBounds(),{checkZoomRange:true, zoomMargin:20});

        map.setLocation({
            bounds: boundsArr
        });
    }
}

createMap();

Comments

[freeExec]

куда я попробовал передать массив из координат всех моих точек

Но bounds это ограничивающая рамка, тут всего 4 координаты.

[System Shock]

да, я уже разобрался)
Здесь надо вручную отобрать из всех точек минимальные и максимальные координаты и передать их в bounds

Answer 1

[System Shock]

Вот мое решение:

function createMap() {
    await ymaps3.ready;

    // map
    const {
        YMap,
        YMapDefaultSchemeLayer
    } = ymaps3;

    const map = new YMap(
        document.querySelector('.contacts-block-list__map'),
        {
            location: {
                center: (itemsArr.length === 1 ? [itemsArr[0]['coord2'], itemsArr[0]['coord1']] : [37.64, 55.76]), 
                zoom: 16,
            }
        }
    );

    map.addChild(new YMapDefaultSchemeLayer());
    // /map

    // marker default
    const {
        YMapDefaultFeaturesLayer
    } = ymaps3;

    const {
        YMapDefaultMarker,
    } = await ymaps3.import('@yandex/ymaps3-markers@0.0.1');

    const markersLayer = map.addChild(new YMapDefaultFeaturesLayer({zIndex: 1800}));
    const coords1 = [];
    const coords2 = [];

    itemsArr.forEach((item, key) => {    
        const defaultMarker = new YMapDefaultMarker({
            coordinates: [item['coord2'], item['coord1']],
            title: `<div class="ymap-title">${item['title_h1']}</div>`,
            subtitle: `<div class="ymap-subtitle">${item['adress_text']}</div>`,
            color: 'blue',
        });

        markersLayer.addChild(defaultMarker);

        coords1.push(item['coord1']);
        coords2.push(item['coord2']);
    });
    // /marker default

        if(itemsArr && itemsArr.length > 1){
            const min = (values) => values.reduce((x, y) => Math.min(x, y));
            const max = (values) => values.reduce((x, y) => Math.max(x, y));
            const min1 = min(coords1);
            const min2 = min(coords2);
            const max1 = max(coords1);
            const max2 = max(coords2);
            
            map.setLocation({
                bounds: [
                    [min2, min1],
                    [max2, max1],
                ],
            });
        }
}

createMap();