Google Maps API V3 InfoBox с использованием jQuery fadeIn и fadeOut

Я искал в Интернете все выше и ниже, и не смог найти учебник или пример использования jQuery для исчезновения InfoBox/InfoWindow в Google Maps, а не содержимого самого окна / окна. Вот мой код, я не уверен, что делаю не так, но что-то тоже не так.

google.maps.event.addListener(marker, 'mouseover', function() {
    ib.setContent(html);
    ib.open(map, marker);
    ib.setValues({type: "point", id: 2})

   var idName = marker.get("id"); //I was trying to the id's of the elements here 
   var boxName = ib.get("id");    //to use in my jQuery

   jQuery(idName ).mouseover(function() {
      jQuery(boxName ).fadeIn('slow', function() {
    // Animation complete
   });
  });

});
Источник

6 ответов

Решение

На самом деле в fadobox возможно исчезнуть, вы должны переопределить функцию рисования в файле infobox.js следующим образом

var oldDraw = ib.draw;
ib.draw = function() {
   oldDraw.apply(this);
   jQuery(ib.div_).hide();
   jQuery(ib.div_).fadeIn('slow'); 
}
Источник

Я попробовал нечто подобное для веб-сайта. вот мой код (Г-апи-V3)

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

function iwFadeIn() {
    infowindow.open(map, marker);
    var iw_container = $(".gm-style-iw").parent();
    iw_container.stop().hide();
    iw_container.fadeIn(1000);
}
Источник

Если вы переопределите метод рисования и примените переход, анимация будет воспроизводиться, даже если вы перетаскиваете или увеличиваете или уменьшаете масштаб карты. Если вы не хотите, чтобы это происходило, вы можете применить fadeIn в обработчике domready. В этом случае эффект затухания наступит только тогда, когда вы откроете информационное окно.

 google.maps.event.addListener(ib, 'domready', function() {
            jQuery(ib).hide().fadeIn('slow');
 })

;

Источник

Я использую маркер библиотеки утилит Google с меткой ( http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

Легко использовать JQuery на этикетках.

google.maps.event.addListener(marker, "mouseover", function (e) { 
    //console.log(this); this.label.labelDiv_.style.display = 'block'; 
    $(this.label.labelDiv_).fadeIn();
});

google.maps.event.addListener(marker, "mouseout", function (e) { 
    //this.label.labelDiv_.style.display = 'none'; 
    $(this.label.labelDiv_).fadeOut();
});
Источник

Эффект fadeOut может быть достигнут путем добавления class и setTimeout. Позволь мне объяснить.

Например:

$('.close-el')
        .on('click', function(e) {
            e.stopPropagation();
            $(infobox.div_).addClass('is-closing');
            setTimeout(function() {
                infobox.close();
            }, 700);
    });

когда вы добавляете класс CSS, и, после завершения перехода CSS, вы закрываете информационное окно

и CSS (sass) (.infoBox - зарезервированный класс)

.infoBox {
    &.is-closing {
        transition: transform 400ms, opacity 400ms;

        transform: translate3d(0, 30px, 0);
        opacity: 0;
    }
}
Источник

Я не думаю, что это возможно, потому что Google не предоставляет опцию анимации.

Попытка получить элемент Dom также не будет работать. Переменная ib является классом google.maps.InfoWindow, а не элементом DOM. Поскольку нет открытого интерфейса для получения элемента DOM для информационного окна, вы не сможете получить к нему доступ самостоятельно.

Если вы используете console.log(ib.get("id")) вы увидите, что идентификатор не определен.

Источник
Другие вопросы по тегам