Клуб API Карт

Клуб API Карт

Приближение балуна

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

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

Подскажите пожалуйста как сделать так, чтобы при  раскрытии балун центрировался на карте и при этом ее масштаб увеличивался, например, на 2 уровня. А при закрытии балуна - все возвращалось на свои места. При этом все это должно происходить плавно (хотел дать ссылу на пример, но ресурс что-то не работает)

p.s. метки выводятся с помощью YMapsML

Заранее благодарен!

14 комментариев
Авторизуйтесь, чтобы оставить комментарий
Andrey.Cjkjvfnby
28 января 2016, 07:09
Подробно описываешь алгоритм действий, а сами действия в апи найти не можешь.

Если с терминами событие(event), колбэк (callback) и обработчик событий (observer)   еще не знаком.  То почитай про них.

В каком разделе документации рассказанно про зумирование карты думаю догадаться не сложно.



greendumb
28 января 2016, 07:09
Уважаемый Андрей!


Я прочитал об этих терминах, но нынешнее знание (т.е. незнание) JS не позволяет мне реализовать данную задачу не опираясь на конкретный пример. Собственно поэтому я и обращаюсь за помощью.



Спасибо за понимание!


p.s. а вот и приблизительный пример того что я хочу сделать http://21200.com.ua/?action=map

thekashey
28 января 2016, 07:09
злой ты.
Эх и почему сейчас просто не говорят RTFM! iddqd!
rodlex
28 января 2016, 07:09
Вам достаточно будет повесить обработчики на события BalloonOpen  и BalloonClose. В обработчиках нужно вызывать метод карты setZoom с включенной опцией smooth.

Примерно так:

var placemark = new YMaps.Placemark(map.getCenter());
placemark.name = "Объект в центре карты";
placemark.metaDataProperty = { zoom : 1 };
map.addOverlay(placemark);

YMaps.Events.observe(placemark, placemark.Events.BalloonOpen, function (obj) {
    obj.metaDataProperty.oldZoom = map.getZoom();
    map.setZoom(obj.metaDataProperty.zoom, { smooth : true });
});

YMaps.Events.observe(placemark, placemark.Events.BalloonClose, function (obj) {
    map.setZoom(obj.metaDataProperty.oldZoom, { smooth : true });
});

Я немного усложнил пример. Я захотел для каждой метки устанавливать свой масштаб, на который нужно зумиться. Значение масштаба записывается в metaDataProperty.zoom. При открытии балуна запоминается текущее значение масштаба, чтобы после закрытия можно было вернуть исходное состояние.
greendumb
28 января 2016, 07:09

Спасибо! А как поступить если метки выводятся через YMapsML:


YMaps.jQuery("#okButton").bind("click", function () {
    map.removeAllOverlays(); 
     map.addOverlay(
        new YMaps.YMapsML("http://site.com/xml/1-" +
        YMaps.jQuery("#Subcat :selected").val() + ".xml")
   );
});

rodlex
28 января 2016, 07:09
Слушать событие Load загружаемого YMapsML и делать обработку для всех меток.

var ml = new YMaps.YMapsML("");
map.addOverlay(ml);

YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
    ml.get(0).forEach(function (obj) {
        // На каждый объект навешиваем события
    });
});
greendumb
28 января 2016, 07:09

Получилась такая конструкция:


YMaps.jQuery("#okButton").bind("click", function () {
map.removeAllOverlays();
var ml = new YMaps.YMapsML("http://interaktivecard.com/xml/simf/1-" +
YMaps.jQuery("#Subcat :selected").val() + ".xml");
ml.metaDataProperty = { zoom : 1 };
map.addOverlay(ml);


 YMaps.Events.observe(ml, ml.Events.Load, function (ml) {
      ml.get(0).forEach(function (obj) { 

       YMaps.Events.observe(ml, ml.Events.BalloonOpen, function (obj) {
         obj.metaDataProperty.oldZoom = map.getZoom();
         map.setZoom(obj.metaDataProperty.zoom, { smooth : true });
       });

       YMaps.Events.observe(ml, ml.Events.BalloonClose, function (obj) {
         map.setZoom(obj.metaDataProperty.oldZoom, { smooth : true });
       });
  });
 });
});


но никакого результата, да и firebug молчит

rodlex
28 января 2016, 07:09
Замените ваши обработчики на следующие:

       YMaps.Events.observe(obj, obj.Events.BalloonOpen, function (obj) {
         map.setZoom(16, { smooth : true });
       });

       YMaps.Events.observe(obj, obj.Events.BalloonClose, function (obj) {
         map.setZoom(8, { smooth : true });
       });

Соответственно коэффициенты масштабирования подставьте ваши.
greendumb
28 января 2016, 07:09
Спасибо, работает, только как сделать, чтобы карта центрировалась на бауне, а то показывает центр города
rodlex
28 января 2016, 07:09
Можно указать дополнительную опции у метода setZoom():
http://api.yandex.ru/maps/jsapi/doc/ref/reference/map.xml#setZoom
greendumb
28 января 2016, 07:09

Должно получиться что-то типо этого:


map.setZoom(15, { smooth: true, position: ???, centering: true });


Не знаю как вернуть позицию балуна?


 

Andrey.Cjkjvfnby
28 января 2016, 07:09
 
Не знаю как вернуть позицию балуна?


Когда-нибудь вы исчерпаете даже бесконечное терпение Саши.
rodlex
28 января 2016, 07:09
map.setZoom(15, { smooth: true, position: obj.getGeoPoint(), centering: true });
greendumb
28 января 2016, 07:09

Искренне извиняюсь!


Наверное я действительно перегнул.


Перед каждым вопросом перерываю кучу информации, которая рождает новые вопросы. Просто я начал вникать в JS только 2 недели назад, а до этого он мне только в страшном сне снился)))