如何在Angular应用中重新加载现有的地图对象？

Question

I have an Angular/Ionic javascript app in which I have google maps loaded in a view. When I run a build of the app on my iPhone, I notice that whenever Google Maps loads, it consumes quite a bit of memory. In 1 session, I'm finding a user sees a map 30-40 times. Each time a user gets back to the map view from a different view, I believe a new map object is created and more memory is consumed. As a result, I'm finding my app crashes after particularly longer sessions.

My question: instead of creating a new map object each time, how do I reload the same map again when the user goes to that specific view? Here is the relevant part of the code:

Controller:

    .controller('GuessCtrl', function($scope, $state, $stateParams, $ionicPopup, $ionicLoading, $ionicHistory) {

            $scope.initialise = function() {
              var myLatlng = new google.maps.LatLng(37.758446, -122.411789);
              var markersArray = [];

              //Initial settings for the map
              var mapOptions = {
                      center: myLatlng,
                      zoom: 2,
                      mapTypeId: google.maps.MapTypeId.ROADMAP,
                      styles: [{ featureType: "poi", elementType: "labels", stylers: [{ visibility: "off" }]}]

                  };

              //Load the initial map
              console.log(map); //null
              var map = new google.maps.Map(document.getElementById("map"), mapOptions);
              console.log(map); //map object details


              $scope.map=map;

            };

            google.maps.event.addDomListener(document.getElementById("map"), 'load', $scope.initialise());

    })

View:

<ion-view view-title="Guess" cache-view="false"  can-swipe-back="false">
  <ion-content scroll="false">

  <!-- START OF IMAGE -->
  <div id = "map" data-tap-disabled="true" style = "height:{{heightWidth}}px;"></div>
  <!-- END OF IMAGE -->


  </ion-content>
</ion-view>

Answer 1

Seem to be having a problem with the API key in the sample below but you can get the gist. Can create an element that you just append to the directives element as you navigate between views, caution here though this means only one of these elements can be in view at once.

Some stuff in here for dealing with when an array of markers changes and compiling the infowindow contents too so buttons with ng-click and whatnot would work in there. The bounds related stuff is just to change the zoom level to contain some set of markers added to the map, can be removed if you don't need that, but this should give you good base.

 /** * itSimpleGoogleMap Module * * Just a google maps api wrapper */ (function(){ 'use strict'; angular.module('itSimpleGoogleMap', []) .directive('itSimpleGoogleMap', function($compile, $timeout){ // Runs during compile var _currentMarkers = []; var newdiv = document.createElement('div'); newdiv.style.width = "100%"; newdiv.style.height = "100%"; var map = new google.maps.Map(newdiv, { center: {lat: 41.90, lng: -87.65}, zoom: 10, mapTypeId: google.maps.MapTypeId.SATELLITE }); return { scope: { markers:'=', overlays:'=', triggerResize:'=' }, // {} = isolate, true = child, false/undefined = no change link: function(scope, iElm) { console.log(newdiv); iElm[0].appendChild(newdiv); _.each(_currentMarkers, function(marker){ marker.setMap(null); }) google.maps.event.trigger(map, 'resize'); scope.$watch('triggerResize', function(){ google.maps.event.trigger(map, 'resize'); }); $timeout(function(){ var mapOptions = { center: {lat: 41.90, lng: -87.65}, zoom: 10 }; scope.$watchCollection('markers', function(){ if(!scope.markers || !scope.markers[0] || !scope.markers[0].coords.latitude) { return; } _.forEach(_currentMarkers, function(curMarker){ curMarker.setMap(null); google.maps.event.clearInstanceListeners(curMarker); }); _currentMarkers = []; var bounds = new google.maps.LatLngBounds(); var infowindow = new google.maps.InfoWindow(); if(scope.markers.length==0){ map.setCenter({lat: 41.90, lng: -87.65}); return; } _.forEach(scope.markers, function(markerData){ var marker = new google.maps.Marker({ position: new google.maps.LatLng(markerData.coords.latitude,markerData.coords.longitude), map: map, icon:markerData.icon // title:markerData.data['Growing Site Name'].answer }); bounds.extend(marker.position); var infoWindowElement; $compile(markerData.infoWindow)(scope, function(cloneElm){ infoWindowElement = cloneElm[0]; }); google.maps.event.addListener(marker, 'click', function() { infowindow.close(); infowindow.setContent(infoWindowElement); infowindow.open(map,marker); }); _currentMarkers.push(marker); }); map.fitBounds(bounds); }); },500) } }; }); })(); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <div ng-app='itSimpleGoogleMap' style="width:500px; height:500px;"> <it-simple-google-map markers="model.mapOpts.markers" trigger-resize="resizeMap"> </it-simple-google-map> </div>