Клуб API Карт

Автоматическое центрирование карты в API 2.0

alexx989
17 мая 2012, 17:03

Доброго времени суток!

Подскажите пожалуйста есть ли в API 2.0 механизм автоматического центрирования карты и ее масштабирования на группе меток или кластеров таким образом, что бы все они попадали в видимую область карты?

Например, на карту AJAX-ом добавляются n меток (или энное количество меток, объединенных в кластеры), разбросанных по m областях Украины. Существуют ли в API Яндекс-карты механизмы, позволяющие автоматически выбрать масштаб, что бы все метки поместились на видимой части карты и отцентрировать карту на геометрическом центре фигуры, образованной полученными метками? Если да, то какие?

Заранее спасибо!

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

Тоже такой вопрос интересен :)

map.setBounds([[minX,minY],[maxX,maxY]]);

Расчет bounds в текущий момент возлагается на Вас.

Также у этого подхода есть проблема - карта может точно войти в указанные границы, а так как метки растут "вверх" от своей точки привязки - маркер вылезет за пределами карты.

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

Спасибо!

Автоматическое масштабирование и центрирование делается так:
Добавляются все точки на карту, а потом у карты спрашивается размер видимой области командой:
myMap.setBounds(myMap.geoObjects.getBounds());



Например:


ymaps.ready(init);
var myMap, myPlacemark;



function init(){
myMap = new ymaps.Map("map", {
center: [55.76, 37.64],
zoom: 11
});



myPlacemark = new ymaps.Placemark(
[59.96596537, 30.31123344],
{
iconContent: 'DiscoFox',
balloonContentHeader: 'DiscoFox',
balloonContentBody: 'ПТ02дек 21:00-23:30 DJ_Fox2'
}, {
preset: 'twirl#blueStretchyIcon'
}
);
myMap.geoObjects.add(myPlacemark);



myPlacemark = new ymaps.Placemark(
[59.96102169, 30.28680924],
{
iconContent: 'MMDance',
balloonContentHeader: 'MMDance',
balloonContentBody: 'ПТ02дек 21:00-23:30'
}, {
preset: 'twirl#blueStretchyIcon'
}
);
myMap.geoObjects.add(myPlacemark);




myMap.controls.add(new ymaps.control.ZoomControl());
myMap.controls.add('typeSelector');


myMap.setBounds(myMap.geoObjects.getBounds());
}