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

我有一个Angular/Ionic javascript应用程序，其中我在视图中加载了谷歌地图。当我在iPhone上运行应用程序的构建时，我注意到每当加载GoogleMaps时，它都会消耗大量内存。在1个会话中，我发现一个用户看到地图30-40次。每次用户从不同的视图返回地图视图时，我相信会创建一个新的地图对象，并消耗更多的内存。因此，我发现我的应用程序在特别长的会话后崩溃

我的问题：不是每次都创建一个新的地图对象，而是当用户转到该特定视图时，如何重新加载同一个地图？以下是守则的相关部分：

控制器：

    .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());

    })

视图：

---

下面示例中的API键似乎有问题，但您可以了解要点。可以创建一个元素，当您在视图之间导航时，只需将其附加到directives元素，但请注意，这意味着一次只能查看其中一个元素

这里有些东西是用来处理标记数组发生变化时的，也用来编译infowindow内容，这样带有ng click之类的按钮就可以在里面工作了。与边界相关的内容只是更改缩放级别，以包含添加到地图中的一些标记集，如果不需要，可以删除这些标记，但这会为您提供良好的基础

/** *itsimpleoglemap模块 * *只是一个谷歌地图api包装器 */ 作用{ "严格使用",； angular.module'itsimplegologlemap'，[] .directive'itsimplegologlemap'，函数$compile，$timeout{ //在编译期间运行 var _currentmarks=[]； var newdiv=document.createElement'div'； newdiv.style.width=100%； newdiv.style.height=100%； var map=new google.maps.Mapnewdiv{ 中心：{lat:41.90，lng:-87.65}， 缩放：10， mapTypeId:google.maps.mapTypeId.SATELLITE }; 返回{ 范围：{ 标记：“=”， 覆盖：'='， triggerResize:“=” }，//{}=隔离，true=子级，false/未定义=无更改 链接：functionscope，iElm{ console.lognewdiv； iElm[0].appendChildnewdiv； _.每个\u当前标记、功能标记{ marker.setMapnull； } google.maps.event.triggermap，“调整大小”； 作用域。$watch'triggerResize'，函数{ google.maps.event.triggermap，“调整大小”； }; $timeoutfunction{ 变量映射选项={ 中心：{lat:41.90，lng:-87.65}， 缩放：10 }; 作用域。$watchCollection'markers'，函数{ if！scope.markers | | |！scope.markers[0]| |！scope.markers[0].coords.latitude { 回来 } _.forEach_CurrentMarker，functioncurMarker{ curMarker.setmapnul； google.maps.event.clearInstanceListenerscurMarker； }; _currentMarkers=[]； var bounds=new google.maps.LatLngBounds； var infowindow=new google.maps.infowindow； ifscope.markers.length==0{ 地图设置中心{lat:41.90，lng:-87.65}； 回来 } _.forEachscope.markers，functionmarkerData{ var marker=new google.maps.marker{ 位置：新google.maps.LatLngmarkerData.coords.latitude，markerData.coords.latitude， 地图：地图， 图标：markerData.icon //标题：markerData.data['Growing Site Name']。答案 }; bounds.extendmarker.position； var信息窗口元素； $compilemarkerData.infoWindowscope，functioncloneElm{ infoWindowElement=cloneElm[0]； }; google.maps.event.addListenermarker“单击”功能{ infowindow.close； infowindow.setContentinfoWindowElement； openmap，标记； }; _currentmarks.pushmarker； }; map.fitbundsbounds； }; },500 } }; }; };

---

可以想象，当不使用时，您可以将地图作为身体的子对象，并将其移到屏幕外……然后在输入适当的路线时，将其放置在视口内。这样，它只会在你不应该在控制器中使用MapDOM相关部分时创建，当我可以在这里挖掘它时，会发布我的GoogleMaps指令

<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>