Клуб API Карт

Как отобразить несколько меток на карте, не отображая вначале карту по-умолчанию?

smirnovln78
8 июня, 10:45

Нужно отобразить несколько меток на карте, чтобы они полностью поместились на карту.

Что делаю:

1. Карта с координатами по-умолчанию, как в примере, на ней центр Москвы

var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10
        }, {
            searchControlProvider: \'yandex#search\'
        });

2. Создаю метки

var myGeoObject = new ymaps.GeoObject({
           метка с координатами в центре Твери
        });

var myGeoObject2 = new ymaps.GeoObject({
           метка с координатами в центре Костромы
        });

3. Добавляю их в коллекцию, вычисляю размер карты и масштаб, помещаю на карту

gCollection = new ymaps.GeoObjectCollection(null);
    
gCollection.add(myGeoObject);
gCollection.add(myGeoObject2);

myMap.geoObjects.add(gCollection);
myMap.setBounds(gCollection.getBounds(), {checkZoomRange: true});

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

Как сделать так, чтобы сразу отображалась нужная карта?

10 комментариев
Подписаться на комментарии к посту
установите начальный центр и масштаб карты так, чтобы они были близки к итоговым, т.е. чтобы на карту сразу помещались Кострома и Тверь
Arina,
все равно  будет начальная карта, с центром в одной из точек, с другим масштабом, и она будет перерисовываться.
smirnovln78,
так и есть) в любом случае сначала создается карта,  а потом на неё добавляются метки и только потом по ним меняется центр и зум. Если Вы заранее знаете, какие метки будут добавлены, то проще всего сразу подобрать центр и зум карты при её создании так, чтобы они не менялись после добавления меток или менялись минимально.
Arina,
да, но как вычислить заранее центр и зум? Есть какая-то функция, которая по набору координат меток все это вычислит?
smirnovln78,
используйте GeoObjectCollection.getBounds() и Map.setBounds().


https://jsfiddle.net/kd4c1vuL/




smirnovln78,


> да, но как вычислить заранее центр и зум
Центр и зум вычисляются в конкретной проекции, которая берется из карты. Так что высчитать их до создания карты, к сожалению, не получится. Можете взять центр и зум из карты полученной через getBounds/setBounds и затем использовать их при создании карты.


Вообще говоря, карта не успевает перерисоваться и "прыгнуть", если делать setBounds сразу после создания карты.
Успевают отправиться запросы на первичные тайлы, если вас это не устраивает, то вы можете попробовать создать карту без слоев, отцентрировать ее, а потом добавить слой.
https://jsfiddle.net/mdo4y0m9/1/
Обновлено 8 июня, 19:30
flapenguin,
 Спасибо! не очень понял как, но это работает :)
Специально для этого кейса есть метод ymaps.util.bounds.fromPoints
Обновлено 9 июня, 08:00
dimik,
и правда, забыл про него.
Собрал пример: https://jsfiddle.net/mdo4y0m9/2/
flapenguin,
Можно не использовать getCenterAndZoom, карта принимает state.bounds


https://tech.yandex.ru/maps/doc/jsapi/2.1-dev/ref/reference/Map-docpage/#param-state.bounds