Dlaczego nie wszystkie kafelki mapy Google są renderowane przy pierwszym załadowaniu aplikacji AngularJS?

Question

Praca na aplikacji Google Map zbudowanej za pomocą AngularJS.

Obecnie wdrażane piaskownicy: http://of.xchg.com/

kliknij link Mapa i można zauważyć tylko jeden żeton JEŚLI są renderowane.

Jeśli następnie ZMINIMALIZUJ okno przeglądarki, TO resztę kafelków mapy wyrenderuje całkowicie.

Oto projekt git: https://github.com/LarryEitel/of4

Dlaczego nie wszystkie Google Mapa Płytki renderowane?

Czy istnieje sposób na sprawdzenie kompletnego renderowania płytek?

Czy istnieje sposób na wymuszenie ponownego renderowania wszystkich kafelków mapy?

Answer 1

Po wielu próbach i błędach znalazłem obejście. Przez samo wstrzyknięcie usługi GoogleMap do polecenia uruchomienia aplikacji, udało się uzyskać kompletną mapę. TAKŻE musiałem ustawić domyślną trasę "/" na stronie mapy. Cokolwiek innego, co zrobię, polegające na przełączeniu się ze strony domowej (bez mapy) na stronę mapy, spowoduje częściowo renderowaną mapę. :(

Może ja lub ktoś zaproponować bardziej eleganckie rozwiązanie. :)

// Generated by CoffeeScript 1.6.1 
    (function() { 
    'use strict'; 
    angular.module('of4App', []).config(function($routeProvider) { 
     return $routeProvider.when('/menu', { 
     templateUrl: 'views/menu.html', 
     controller: 'MainCtrl' 
     }).when('/list', { 
     templateUrl: 'views/list.html', 
     controller: 'MainCtrl' 
     }).when('/map', { 
     templateUrl: 'views/map.html', 
     controller: 'MapCtrl' 
     }).when('/about', { 
     templateUrl: 'views/main.html', 
     controller: 'MainCtrl' 
     }).otherwise({ 
     redirectTo: '/map' 
     }); 
    }).run(function($rootScope, $location, GoogleMap) { 
     var rootScope; 
     rootScope = $rootScope; 
     rootScope.navBarHeight = 40; 
     return rootScope.mapShown = function() { 
     var mapShown; 
     mapShown = $location.path().indexOf('/map') > -1; 
     return mapShown; 
     }; 
    }); 

    }).call(this); 

Answer 2

wywołać tę funkcję w kontrolerze mapy:

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

To powinno załatwić sprawę.

Answer 3

znalazłem ten problem, gdy próbuje ponownie wyśrodkować mapę po widoku załadowany. W lewym górnym rogu znajduje się pojedynczy kafelek.

Zauważyłem, że wycentrował on mapę na wysokości div (0,0) i uznałem, że musi ona mierzyć div, zanim była widoczna. Oznaczałoby to, że wymiary wynosiły 0px, 0px, a zatem wyśrodkowanie mapy oznaczałoby umieszczenie pojedynczej płytki w punkcie (0,0).

Próbowałem rozwiązanie wyzwalania zdarzenie Resize

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

i że prawie pracował - napełnił div z płytek, ale to wciąż było skupione w (0,0).

Co pracowało, aby owinąć ponownie kod centrum w $timeout(). To gwarantuje, że kod div jest w pełni załadowany i ma prawidłowe wymiary przed uruchomieniem kodu. Teraz działa idealnie.

$timeout(function() { 
    // still need this. 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(53, -6); 
});