Puisque apparemment vous ne pouvez pas vraiment détruire la carte des cas, un moyen de réduire ce problème si
- vous avez besoin d'afficher plusieurs cartes à la fois sur un site web
- le nombre de cartes peuvent changer avec l'interaction de l'utilisateur
- les cartes doivent être masqués et re-présentés ensemble avec d'autres composants (c'est à dire qu'ils n'apparaissent pas dans une position fixe dans les DOM)
est de maintenir un pool d'instances de map.
La piscine garde des pistes d'instances utilisées, et quand il est demandé une nouvelle instance, il vérifie si la carte disponible instances est gratuit: si il l'est, il sera de retour un existant, si elle n'est pas, il va créer une nouvelle carte de l'instance et de la retourner, ajoutant à la piscine. De cette façon, vous n'aurez qu'un nombre maximal d'instances égal au nombre maximum de cartes que vous jamais afficher simultanément sur l'écran.
Je suis en utilisant ce code (il nécessite jQuery):
var mapInstancesPool = {
pool: [],
used: 0,
getInstance: function(options){
if(mapInstancesPool.used >= mapInstancesPool.pool.length){
mapInstancesPool.used++;
mapInstancesPool.pool.push (mapInstancesPool.createNewInstance(options));
} else {
mapInstancesPool.used++;
}
return mapInstancesPool.pool[mapInstancesPool.used-1];
},
reset: function(){
mapInstancesPool.used = 0;
},
createNewInstance: function(options){
var div = $("<div></div>").addClass("myDivClassHereForStyling");
var map = new google.maps.Map(div[0], options);
return {
map: map,
div: div
}
}
}
Vous passer de départ les options de la carte (selon le deuxième argument de google.cartes.Carte du constructeur), et il renvoie à la fois la carte de l'instance (sur lequel vous pouvez appeler des fonctions relatives à google.cartes.Carte), et le conteneur , vous pouvez appliquer un style à l'aide de la classe "myDivClassHereForStyling", et vous pouvez dinamically ajouter au DOM.
Si vous avez besoin de réinitialiser le système, vous pouvez utiliser mapInstancesPool.reset(). Cela réinitialise le compteur à 0, tout en gardant toutes les instances existantes dans la piscine pour la réutilisation.
Dans mon application j'ai besoin de supprimer toutes les cartes à la fois et de créer un nouveau jeu de cartes, donc il n'y a pas de fonction de recycler une carte spécifique exemple: votre kilométrage peut varier.
Pour supprimer les cartes de l'écran, j'utilise jQuery détacher, ce qui ne veut pas détruire la carte du conteneur .
En utilisant ce système, et en utilisant
google.maps.event.clearInstanceListeners(window);
google.maps.event.clearInstanceListeners(document);
et en cours d'exécution
google.maps.event.clearInstanceListeners(divReference[0]);
divReference.detach()
(où divReference est la div à l'objet jQuery retourné à partir de l'Exemple de la Piscine)
sur chaque div, je suis retrait, j'ai réussi à garder le Chrome est l'utilisation de la mémoire plus ou moins stable, par opposition à elle augmente à chaque fois que je supprimer des cartes et d'en ajouter de nouvelles.
