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