Клуб API Карт

Масштабирование карты при использовании setBounds

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

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

Размещаю на карте (api версии 2) метки вот таким кодом:

 

  
  var map;
  var myCollection;
  
  ymaps.ready(function () {
    map = new ymaps.Map('YMapsID', {
        center: [56.833333, 60.583333], // Екатеринбург
        zoom: 15,
        type: 'yandex#map',
        behaviors: ['default', 'scrollZoom']
    });
  
  //Добавляем элементы управления
   map.controls                
            .add('zoomControl')                
            .add('typeSelector')                
            .add('mapTools')
            //Обзорная карта, с заданным типом
            .add(new ymaps.control.MiniMap({
                type: 'yandex#publicMap'
            }));
      
  myCollection = new ymaps.GeoObjectCollection();       
  make_centers();
})
  
function make_centers(){
   
  var json = [{"id":"30","name":"\u0428\u0438\u0448\u043a\u0438\u043d\u043e","place":"\u0433\u043e\u0440\u043e\u0434\u0441\u043a\u043e\u0439 \u043e\u043a\u0440\u0443\u0433 \u0411\u0435\u0440\u0435\u0437\u043e\u0432\u0441\u043a\u0438\u0439","sale_office_phone":"8 (343) 345-67-89; 8 (912) 6666-222","lon":"60.906998","lat":"56.907561"}];
  for (i = 0; i < json.length; i++) {
    var sch = i+1;
    var placemark = new ymaps.Placemark([json[i].lat,json[i].lon], {
      iconContent: sch,
        balloonContentHeader: '<div><a href="/villages/'+json[i].id+
        '" style="color:#b5197b;">'+json[i].name+'</a></div>',
        balloonContentBody: '<div style="font-size:13px;"><div><strong>Адрес:</strong> '+json[i].place+'<br>'+'<strong>Телефоны:</strong> '+json[i].sale_office_phone+'<br></div></div>'   
      }, {
      // Опции
      preset: 'twirl#violetDotIcon'
    });
    myCollection.add(placemark);    
    map.geoObjects.add(myCollection);
    // Set center and zoom using collection bounds.
    // CheckZoomRange prevent too high zoom on map with 1 object.
    map.setBounds(myCollection.getBounds(), {checkZoomRange:true});
  }
}

 

Вот пример в действии.

 

Всё работает хорошо, пока на карту добавляется несколько меток. Но если она одна, то я хотел бы делать zoom меньше. А сейчас карта открывается на максимальном увеличении.

 

Пробовал экспериментировать со значением zoom в конфигурации карты и map.setZoom, но безрезультатно.

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

Попробуйте поэксперементировать с опцией zoomMargin

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

 

map.setBounds(myCollection.getBounds(), {checkZoomRange:true, zoomMargin:100});

 

И вообще никаких изменений.

Это очень странно.

При больших значениях карта вообще перестает отображаться, похоже на ошибку в АПИ

zoomMargin - это отступы, которые должны соблюдаться при выставлении прямоугольных границ. 

Если на карту добавлена 1 точка, то у нее уже и так максимально возможные отступы от краев - в этом случае zoomMargin никак не поможет.

То есть то, что нет никаких изменений - это нормально.

Ответила на похожий вопрос ранее.

Можно попробовать так (после центровки функция проверяет масштаб, и если какрта очень приближена - то отдаляет до необходимого размера):

map.setBounds(myCollection.getBounds(), {checkZoomRange:true, callback:function(){ if(map.getZoom() > 10) map.setZoom(10); } });

 

Для новой версии (2.1):

map.setBounds(myCollection.getBounds(), {checkZoomRange:true}).then(function(){ if(map.getZoom() > 10) map.setZoom(10);});

чтобы не создавать коллекцию можно даже сделать так:

                    myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){ if(myMap.getZoom() > 10) myMap.setZoom(10);});
Алексей Оникиенко
2 февраля 2019, 15:55
Artemeey,
Помогло, спасибо. То что нужно! Под свои нужды можно подогнать.