Starei attento con
$scope.on('$destroy', function(){
mapInstance = null;
})
ho avuto una direttiva che contiene la mia mappa elemento DOM, e stava chiamando questo metodo per rimuovere tutti i riferimenti della mappa dalla dataLayer, tutti gli ascoltatori, e quindi impostando la mappa su null. Stavo controllando l'heap tra la navigazione della pagina e l'istanza della mappa era stata creata di nuovo, ma le vecchie mappe erano ancora nell'heap che portava ad un utilizzo sempre maggiore della memoria.
Anche la risposta che hai collegato raccomanda di riutilizzare l'istanza della mappa invece di provare a rimuoverla. Anche gli sviluppatori di google maps raccomandano questo approccio. La soluzione che ho trovato è stata quella di passare l'elemento direttiva a un servizio e aggiungere un elemento figlio a quello che creava la mappa sul nuovo elemento figlio. Se la mappa esiste già, basta aggiungere la mappa div all'elemento della direttiva. Ecco il mio codice qui sotto.
ng-view Elemento
<map-container></map-container>
direttiva
angular.module('project')
.directive('mapContainer', function($timeout, mapService) {
return {
template: '<div></div>',
restrict: 'E',
replace: true,
link: function(scope, element) {
$timeout(function() {
//Use the $timeout to ensure the DOM has finished rendering
mapService.createMap(element).then(function() {
//map now exists, do whatever you want with it
});
});
}
};
})
Servizio
angular.module('project')
.service('mapService', function($q) {
var lat = -33.1798;
var lng = 146.2625;
var minZoom = 5;
var maxZoom = 20;
var zoom = 6;
var mapOptions = null;
var map = null;
function initialiseGmap(element) {
return $q(function (resolve) {
if (map) {
//Map already exists, append it
element.append(map.getDiv());
resolve();
} else {
//No map yet, create one
element.append('<div id="map_canvas"></div>');
mapOptions = {
zoom: zoom,
center: new google.maps.LatLng(lat, lng),
styles: hybridMap, //your style here
minZoom: minZoom,
maxZoom: maxZoom,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
streetViewControl: false,
panControl: false,
scaleControl: true,
zoomControl: false
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
//create any map listeners you want here. If you want to add data to the map and add listeners to those, I suggest a seperate service.
resolve();
}
});
}
return {
createMap: function(elem) {
return initialiseGmap(elem);
},
getMap: function() {
return map;
},
//Create as many functions as you like to interact with the map object
//depending on our project we have had ones to interact with street view, trigger resize events etc etc.
getZoom: function() {
return zoom;
},
setZoom: function(value) {
map.setZoom(zoom);
}
};
});
yeap, è angolare applicazione JS – URL87
In un caso scrivo la mia direttiva, che cosa devo fare in la funzione '$ destroy' e come ridisegnarla? – URL87
Ho aggiornato la mia risposta su come distruggerlo.Non sono sicuro del motivo per cui è necessario ridisegnarlo poiché il DOM a cui è collegato è scomparso. Basta creare una nuova mappaInstance quando viene compilata la nuova direttiva. – jonhobbs