Google Maps API V3: Sovrapponi ImageMap con indicatori di caricamento

Question

Ho una sovrapposizione di imaginemap come quanto segue:

var options = {
    getTileUrl: function(coord, zoom) {
        return myUrl+"?x=" + coord.x + "&y=" + coord.y + "&z=" + zoom;
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true
};

var overlay = new google.maps.ImageMapType(options);
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, overlay);

.

Poiché le immagini possono richiedere un po 'di tempo per caricare, voglio mostrare indicatori di carico per la mappa (quelle gif animate comuni per le chiamate AJAX).Non sono sicuro se l'usabilità sarebbe migliore se c'è un solo indicatore per l'intera mappa o un indicatore per ogni piastrella di sovrapposizione.Quindi, soluzioni e pensieri per entrambi sono i benvenuti.

Answer 1

Utilizzare CSS per nascondere il div che tiene la tua mappa.Utilizzare addEventListenerOnce() sulla tua mappa per ascoltare l'evento idle o forse l'evento bounds_changed.(Potrebbe essere necessario sperimentare per vedere quale evento ti dà il risultato migliore.) Quando l'evento si incende, crea il div che tiene visibile la mappa.

Ci sono almeno due modi ragionevoli per mostrare l'indicatore di avanzamento in attesa che l'evento si spara.Puoi averlo in un div separato che (oltre a rivelare il div map) si nasconde quando l'evento si incende.Oppure puoi avvolgere la mappa div all'interno di un altro div e impostare l'immagine di sfondo per quel div da essere la tua immagine dell'indicatore di avanzamento animato.

Alla fine, il tuo codice potrebbe assomigliare a questo blocco ho dovuto scrivere non molto tempo fa:

document.getElementById("map_canvas").style.visibility = "hidden";
var mapType = new google.maps.ImageMapType({
                tileSize: new google.maps.Size(256,256),
                getTileUrl: function(coord,zoom) {
                    return 'img/tiles/'+zoom+'/'+coord.x+'/'+coord.y+'.png';
                }
            });
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.overlayMapTypes.insertAt(0, mapType);
google.maps.addListenerOnce(map, 'idle', function() { document.getElementById("map_canvas").style.visibility = "visible";});

.