Question

我有一个Angular / Ionic javascript应用程序，其中我在视图中加载了谷歌地图。当我在iPhone上运行应用程序的构建时，我注意到每当加载Google Maps时，它会消耗相当多的内存。在一个会话中，我发现用户看到地图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());

    })

查看：

<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

在下面的示例中似乎遇到API密钥问题，但您可以获得要点。在视图之间导航时，可以创建一个只附加到directives元素的元素，这里要注意，这意味着这些元素中只有一个可以同时在视图中。

这里有一些东西用于处理标记数组的变化以及编辑infowindow内容时所以按钮有ng-click和whatnot可以在那里工作。边界相关的东西只是改变缩放级别以包含添加到地图的一些标记，如果你不需要它可以删除，但这应该给你很好的基础。

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

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

1 个答案: