Ponowne utworzenie mapy Google po zmianie szerokości kontenera

Mam zestaw map google z Javascript API V3. Jest wyświetlany w div o dynamicznej szerokości, gdy po kliknięciu na znacznik pojawi się okienko zawartości.

Wszystko działa dobrze, ale jedno: gdy panel przesuwa się w górę, szerokość mapy jest zmieniana, a więc środek jest przesunięty w prawo(panel jest po lewej). Jest to naprawdę niewygodne, szczególnie w przypadku małych rozdzielczości, w których nie można nawet zobaczyć Centrum po otwarciu okienka.

Próbowałem 'resize' trigger, ale nie działa... Jakieś pomysły ?

Wielkie dzięki !

Author: Unknown, 2011-12-19
Source

4 answers

Wywołanie resize przez to samo nie osiągnie tego, czego potrzebujesz.

Musisz najpierw (zanim nastąpi zmiana rozmiaru) uzyskać aktualny środek mapy 

var currCenter = map.getCenter();

Następnie musisz zrobić coś takiego, jak poniżej, po zmianie rozmiaru div. 

google.maps.event.trigger(map, 'resize');
map.setCenter(currCenter);

Should do the trick

Aktualizacja 2018-05-22

Z nowym wydaniem renderera w wersji 3.32 API JavaScript Maps Zdarzenie resize nie jest już częścią klasy Map.

Dokumentacja Stany

Gdy mapa jest zmieniana, środek mapy jest stały

  • Kontrola pełnoekranowa zachowuje teraz środek.

  • Nie ma już potrzeby ręcznego uruchamiania zdarzenia resize.

Źródło: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); nie ma żadnego efektu począwszy od wersji 3.32

 83
Author: omarello,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-05-22 11:02:09

Najpierw ustaw zmienną dla bieżącego centrum, a następnie użyj detektora zdarzeń do wykrycia zmiany rozmiaru i ustaw środek. 

//Get current center
var getCen = map.getCenter();

//Use event listener for resize on window
google.maps.event.addDomListener(window, 'resize', function() {
   //Set Center
   map.setCenter(getCen);
});
 16
Author: Tyler Rafferty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-28 00:14:23

Omarello działa, ale nie mogę tego zmienić. Prawdopodobnie zapomniałeś odwołać się do var, który definiuje twoje współrzędne środkowe. Wszystko, co robi" zmiana rozmiaru", to wyciąganie bieżącej szerokości i wysokości div, to nic nie zmienia na temat mapy--jeszcze!

var center = new google.maps.LatLng(39.5, -98.3);

$(document).ready(function() { 
    $("#fullsize").click(function(e) { 
        e.preventDefault();
        $("#map_canvas").css({ 
            width: '1000px'});
        google.maps.event.trigger(map, "resize"); 
        map.setCenter(center);
        }); 
    });
 7
Author: efwjames,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-03 22:47:18

Hy tam spróbuj tego;)

On map initialization 

var currentMapCenter = null; 
google.maps.event.addListener(map, 'resize', function () {
    currentMapCenter = map.getCenter();
});

google.maps.event.addListener(map, 'bounds_changed', function () {
    if (currentMapCenter) {
    // react here
        map.setCenter(currentMapCenter);
    }
    currentMapCenter = null;
});

Po tym wystarczy zadzwonić, gdy chcesz zmienić rozmiar mapy.

google.maps.event.trigger(map, 'resize');
 2
Author: Jose Rocha,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-13 10:29:16