Google Maps API V3 Infobox jQuery fadeIn i Fadeout

Question

Szukałem w sieci wysokiego i niskiego i nie były w stanie znaleźć samouczek lub przykład przy użyciu jQuery zanikać się Infobox/InfoWindow w Mapach Google nie Zawartość rzeczywista skrzynkowych /okno. Oto mój kod, nie jestem pewien, co robię źle, ale coś też nie wydaje się właściwe.

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 
    }); 
    }); 

}); 

Answer 1

To jest rzeczywiście możliwe fadein z Infobox, trzeba zastąpić funkcję Remis w infobox.js pliku, podobnie jak to

var oldDraw = ib.draw; 
ib.draw = function() { 
    oldDraw.apply(this); 
    jQuery(ib.div_).hide(); 
    jQuery(ib.div_).fadeIn('slow'); 
} 

Answer 2

Nie sądzę, że jest to możliwe, ponieważ Google nie oferuje opcji animacji.

Próbuje elementu DOM nie będzie działać albo. Zmienna ib to klasa google.maps.InfoWindow, a nie element DOM. Ponieważ nie ma publicznego interfejsu, aby uzyskać element DOM dla okna informacyjnego, nie będziesz mieć dostępu do niego samemu.

Jeśli używasz console.log(ib.get("id")) widać, że identyfikator jest niezdefiniowany.

Answer 3

używam znacznik google biblioteki narzędzie z etykietą (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/docs/examples.html)

Łatwo jest używać jquery na etykietach.

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(); 
}); 

Answer 4

Jeśli zastąpić metodę rysowania i zastosować rozjaśniania, animacja będzie odtwarzana nawet jeśli przeciągnąć wokół lub zoom in/out w map.If nie chcesz, aby tak się stało, można zastosuj fadeIn w metodzie domready handler. W takim przypadku efekt zniknie tylko wtedy, gdy otwierasz infomatindow.

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

;

Answer 5

Próbowałem czegoś podobnego na stronie internetowej. tutaj jest mój kod. (gm-api-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); 
} 

Answer 6

Efekt fadeOut można uzyskać, dodając klasy i setTimeout. Pozwól mi wyjaśnić.

Na przykład:

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

kiedy dodać klasę CSS, a po zakończeniu przejścia css zamknięciu okna INFO

i CSS (Sass) (.infoBox zarezerwowaną klasę)

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

     transform: translate3d(0, 30px, 0); 
     opacity: 0; 
    } 
}