Клуб API Карт

Клуб API Карт

Как перемещать балун?

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

У меня такая задача. Я создал свой балун без Апи просто html, теперь при клике на метку я его прикрепляю к ней и устанавливаю по ее координатам переконвертировав их в глобальные пиксельные. А теперь нужно чтобы этот балун перемещался за ней при любых событиях (изменение зума, смещение карты и тд.) P.S. Стандартный балун неподходит так как мне нужно чтобы бален мог отчасти, когда это нужно, вылазить за границы карты. 

Вот ссылочка на карту http://svadbagolik.cybers.net.ua/index2.php

12 комментариев
Авторизуйтесь, чтобы оставить комментарий
Алексей Yarrr!
28 января 2016, 04:02

Надо повесить на map mouseenter, mouseleave, mousedown, mouseup, mousemove по желанию.

И при mousedown + mousemove двигать балун на разницу смещения с предыдущего значения ;-)

mousedown: ставим флаг, что мы таскаем карту (draggin), запоминаем исходную позицию курсора.

mousemove: берем позицию, считаем разницу, запоминаем новую позицию, смещаем балун на разницу.

mouseup: смещаем балун на разницу, убираем флаг таскания карты.

События вешать надо на контейнер карты и не стопать их, потому что они должны еще упасть в карту - иначе карта двигаться не будет.

 

Хотя, может быть есть какие-то более простые варианты, используя API... Там ведь всё это уже ловится и меняется...

iytin-ne
28 января 2016, 04:02

Здравствуй. Я уже похожий вариант пробовал 

 

 

var mapOnMoving = 0;

myMap.events.add('mousedown', function(e){

mapOnMoving = 1; // двигаемся

console.log(mapOnMoving) 

})

//

myMap.events.add('mouseup', function(e){

mapOnMoving = 0; // закончили

console.log(mapOnMoving) 

})

myMap.events.add('mousemove', function (e) {

if(mapOnMoving==1){

    pos=e.get('position');

   console.log(pos) 

//  $('#balun').css('left',pos[0]);

//$('#balun').css('bottom', (Number(heights)-pos[1]));

}

})

 вот такое сейчас можно увидеть по ссылке которую я кидал выше, проблема в том что оно неверно работает, и при зажатой кнопке мыши и mousemove выдает мне только одно значение, а отпускание мышы вообще не срабатывает когда надо, только когда просто кликнуть и отпустить то значения флажка изменяются, все видно в консольке)



iytin-ne
28 января 2016, 04:02

если был бы вариант как подцепить такой балун к АПИшке то было вобще супер, но чувствую это не реально)

 

Алексей Yarrr!
28 января 2016, 04:02

Тогда пробуй сначала через domEvents, забудь про события карты.

Т.е. вешайся на dom ноду, а не объект из yamaps.

var mapOnMoving = false, cursorPreviousPosition = [];

$('#map').bind({

  'mousedown': function(e) {

    console.debug('moving on at ', position);

    cursorPreviousPosition = position;

    mapOnMoving = true;

  },

  'mouseup': function(e) {

    mapOnMoving = false;

    cursorPreviousPosition = position;

    console.debug('moving off at ', position);

  },

  'mousemove': function(e) {

    if (!mapOnMoving) return;

    console.debug('moving at ', position);

    balloon.position(balloon.position() + (position - cursorPreviousPosition));

    cursorPreviousPosition = position;

  }

});

 

примерно так. только position надо выбрать из евента, и когда будешь складывать - надо складывать отдельно left, отдельно top. при выводе тоже самое.

технически такое решение должно работать.

и это реально)

Алексей Yarrr!
28 января 2016, 04:02

Вот тут, например, как обычный event выглядит. https://developer.mozilla.org/en/DOM/MouseEvent

jQuery его немного приукрашивает, в вашем случае можно и тут пошукать: http://api.jquery.com/category/events/mouse-events/ http://api.jquery.com/mousemove/

Вопрос оптимизации и скорости, ведь, пока на втором плане?) Да и он не стоит так уж остро в вашем случае.

Удачи)

iytin-ne
28 января 2016, 04:02

Спасибо большое за инфу, сейчас буду ковыряться. Просто опыта еще не много)

Алексей Yarrr!
28 января 2016, 04:02

Ну так для того мы здесь и собрались чтобы им делиться ;-)

mari-na-bzzz
28 января 2016, 04:02

Вообще задачка довольно непростая.

Можно попробовать подойти со стороны map.actionManager. Слушать на нем события begin, end и tick, и используя метод getCurrentState, получать состояния карты в моменты перемещения. И вместе с ней перемещать балун. Правда я не уверена, что получится сделать перемещение балуна абсолютно синхронно с картой из-за анимации в некоторых бразуерах.

iytin-ne
28 января 2016, 04:02

:-@ спасибо)

nolan23
28 января 2016, 04:02

а зачем такие сложности?

просто через фабрику сделать layout и прикрепить его к Placemark?

в лейуате показывть баллун не в контейнере карты, над ним.

balloonContentBodyLayout = ymaps.templateLayoutFactory.createClass(html);

 

 placemark.options.set({

            draggable: true,

            balloonCloseButton: false,

            hideIconOnBalloonOpen: false,

            balloonContentBodyLayout : balloonContentBodyLayout });

placemark.events.add('balloonopen', function(e) {

     var balloon = e.get('balloon'),

          $balloonContainer = $(balloon. getOverlay() .getBalloonElement());

          $balloonContainer.appendTo($(balloon.getMap().panes.get('outers'));

})

не проверял код, но смысл в том, чтобы переместить balloon на pane 'outers'

возможно есть более простой способ.

 

iytin-ne
28 января 2016, 04:02

Здравствуйте. Можно немного подробней. я создал балун и прикрепил его к

placemark.

а вот что делают или должны делать вот эти строки?   

$balloonContainer = $(balloon. getOverlay() .getBalloonElement());

          $balloonContainer.appendTo($(balloon.getMap().panes.get('outers'));

nolan23
28 января 2016, 04:02

первая строка - получаем контейнер баллуна и отдаем его jquery. получаем jquery объект $balloonContainer.

вторая строка - перемещаем контейнер баллуна в pane "outers".

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