Comme apparemment, vous ne pouvez pas vraiment détruire les instances de carte, un moyen de réduire ce problème si
- vous devez afficher plusieurs cartes à la fois sur un site Web
- le nombre de cartes peut changer avec l'interaction de l'utilisateur
- les cartes doivent être masquées et ré-affichées avec d'autres composants (c'est-à-dire qu'elles n'apparaissent pas dans une position fixe dans le DOM)
conserve un pool d'instances de carte. Le pool garde la trace des instances utilisées, et quand il est demandé une nouvelle instance, il vérifie si l'une des instances de carte disponibles est libre: si c'est le cas, il en retournera une existante, si ce n'est pas le cas, il créera un nouvelle instance de carte et la renvoyer, en l'ajoutant au pool. De cette façon, vous n'aurez qu'un nombre maximum d'instances égal au nombre maximum de cartes que vous affichez simultanément à l'écran. J'utilise 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 lui transmettez les options de carte de départ (selon le deuxième argument du constructeur de google.maps.Map), et il renvoie à la fois l'instance de la carte (sur laquelle vous pouvez appeler des fonctions relatives à google.maps.Map) et le conteneur, qui vous pouvez styliser en utilisant la classe "myDivClassHereForStyling", et vous pouvez ajouter de façon dynamique au DOM. Si vous devez réinitialiser le système, vous pouvez utiliser mapInstancesPool.reset (). Il réinitialisera le compteur à 0, tout en conservant toutes les instances existantes du pool pour une réutilisation. Dans mon application, j'avais besoin de supprimer toutes les cartes en même temps et de créer un nouvel ensemble de cartes, il n'y a donc pas de fonction pour recycler une instance de carte spécifique: votre kilométrage peut varier. Pour supprimer les cartes de l'écran, j'utilise le détachement de jQuery, qui ne détruit pas le conteneur de la carte.
En utilisant ce système et en utilisant
google.maps.event.clearInstanceListeners(window);
google.maps.event.clearInstanceListeners(document);
et courir
google.maps.event.clearInstanceListeners(divReference[0]);
divReference.detach()
(où divReference est l'objet jQuery de la div renvoyé par le pool d'instances) sur chaque div que je supprime, j'ai réussi à maintenir l'utilisation de la mémoire de Chrome plus ou moins stable, au lieu de l'augmenter chaque fois que je supprime des cartes et en ajoute de nouvelles.