Perché non vengono visualizzate tutte le tile di Google Map sul carico iniziale di un'app AngularJS?

Question

Lavorare su un'app Google Map creata con AngularJS.

sandbox attualmente dispiegati: http://of.xchg.com/

Fai clic link e si noterà solo una tessera EVENTUALI sono resi.

Se quindi ridimensionare la finestra del browser, poi il resto delle piastrelle mappa renderà completamente.

Ecco il progetto git: https://github.com/LarryEitel/of4

Perché non sono tutti Google mappa piastrelle resi?

C'è un modo per testare la completa rendering di piastrelle?

C'è un modo per forzare la re-rendering di tutte le tessere della mappa?

Answer 1

Dopo un sacco di tentativi ed errori, ho trovato una soluzione. Semplicemente iniettando il servizio GoogleMap nel comando di esecuzione dell'app, ha reso correttamente la mappa completa. Ho anche dovuto fare il percorso predefinito '/' mostrare la pagina della mappa. Qualsiasi altra cosa che farei in questo caso provando a passare da una pagina di casa (senza mappa) alla pagina della mappa risulterebbe in una mappa parzialmente renderizzata. :(

Forse o qualcuno sarà suggerire una soluzione più elegante. :)

// 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

chiamare questa funzione nel controller mappa:

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

Questo dovrebbe fare il trucco.

Answer 3

ho trovato questo problema quando si cerca di centrare nuovamente la mappa dopo la vista caricato. Ci sarebbe una singola tessera nell'angolo in alto a sinistra.

Ho notato che stava centrando la mappa nella parte superiore dello div (0,0) e ho calcolato che doveva misurare lo div prima che fosse visibile. Ciò significherebbe che le dimensioni erano 0px, 0px e quindi centrare la mappa significherebbe posizionare una singola tessera a (0,0).

ho provato la soluzione di innescare l'evento resize

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

e che quasi ha funzionato - è riempito la div con piastrelle, ma è stato comunque centrato a (0,0).

Quello che ha funzionato è stato quello di inserire il codice ri-centro in una $timeout(). Ciò garantisce che il div sia completamente caricato e dimensionato correttamente prima dell'esecuzione del codice. Ora funziona perfettamente.

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