web-dev-qa-db-fra.com

Comment forcer le redessin avec l'API Google Maps v3.0?

J'ai une application Maps assez sophistiquée qui gère plusieurs marqueurs personnalisés et autres. J'ai une fonction appelée resizeWindow que j'appelle un écouteur à chaque fois que l'écran est changé, la carte se redessine en calculant de nouvelles limites et en forçant un redimensionnement. Cela ressemble à ceci:

window.onresize = function(event) { fitmap(); };

et la fonction à redimensionner est:

function fitmap(id) {
    var coords = [];
    var newlatlng = new google.maps.LatLng(projlat, projlng);
    coords.Push(newlatlng);

        for (var i=0; i<markers[id].length; i++) {
            newlatlng = new google.maps.LatLng(markers[id][i].latitude, markers[id][i].longitude);
            coords.Push(newlatlng);
        }
    }   

    var bounds = new google.maps.LatLngBounds ();
    for (var i = 0, LtLgLen = coords.length; i < LtLgLen; i++) {
        bounds.extend (coords[i]);
    }
    map.fitBounds(bounds);

et cela fonctionne très bien lorsque je redimensionne réellement la fenêtre. Mais...

J'ai un menu en bas à droite de la fenêtre. J'utilise jquery.animate pour déplacer ce menu hors de l'écran. J'appelle la fonction fitmap comme un processus par étapes (ou juste une fois à la fin) et elle ne redessinera pas la carte.

$('#rightSide').animate({ right:"-240px" }, { 
    duration:1000, 
    step: function(now,fx) {
        fitmap();
    } 
});

J'ai lu et lu à ce sujet et il semble qu'il y ait une bizarrerie dans l'API Google Maps v3.0 que le redessin ne se produira pas si rien ne change réellement. Dans ce cas, ma fenêtre disponible passe de la largeur de l'écran - menu au plein écran réel. Mais aucun redessin ne se produit.

J'ai essayé google.maps.event.trigger (map, 'resize'); et ça ne marche pas non plus.

Existe-t-il un moyen de forcer absolument Google Maps à se redessiner?

jquerygoogle-maps-api-3jquery-animate
27
Doug Wolfgram

google.maps.event.trigger(MapInstance,'resize') fonctionne bien pour moi, mettez-le au début de la fonction fitMap.

Ce qui vous manque:

actuellement (pas dans le code affiché ci-dessus, dans votre live-code), vous appelez resizeWindow sur chaque step.

Lorsque vous appelez cette fonction sur step, la fonction sera appelée avant l'animation de l'étape en cours est terminée. Le résultat est que resizeWindow ne sera pas appelé lorsque l'animation complète sera terminée, il y aura par exemple une marge sur le côté droit de la carte.

Solution: appelez resizeWindow également sur le callback complete- du animation.

59
Dr.Molle