Question

假设我有一个单页面应用程序（Angular JS应用程序），并在元素标识googleMap上绘制一个Google Map实例 -

var mapInstance = new google.maps.Map(document.getElementById(`googleMap`), mapOption)

然后我浏览应用程序路由，因此，销毁googleMap DOM元素，最后我回到带有此元素的路径，现在我必须在此元素上重新绘制地图。

重绘地图的正确方法是什么？

当我在this answer中阅读时，我不必重新创建它，而是使用相同的实例。

Answer 1

这个问题有angularjs标签，所以我假设这是一个Angular JS应用程序。在这种情况下，您可能不应该在页面控制器中执行此操作。

您可以使用预先存在的指令，例如https://angular-ui.github.io/angular-google-maps/#!/，也可以编写自己的指令。

如果您编写自己的指令，那么每次使用$ scope.on（＆＃39; $ destroy＆＃39;，fn）事件销毁指令时，您都应该销毁Google地图实例。像这样......

$scope.on('$destroy', function(){
    mapInstance = null;
})

Answer 2

我会小心

$scope.on('$destroy', function(){
    mapInstance = null;
})

我有一个包含我的map DOM元素的指令，并且正在调用此方法从数据层，所有侦听器中删除所有地图引用，然后将地图设置为null。我正在检查页面导航之间的堆，并且正在重新创建地图实例，但旧地图仍在堆中，导致内存使用量不断增加。

此外，您链接的答案建议您重新使用地图实例，而不是尝试删除它。谷歌地图开发人员也推荐这种方法。我找到的解决方案是将您的指令元素传递给服务，并将子元素附加到在新子元素上创建地图的元素。如果地图已经存在，只需将地图div附加到指令元素。以下是我的代码。

ng-view元素

<map-container></map-container>

<强>指令

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
           });
        });
      }
    };
 })

<强>服务

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);
      }
    };
  });

Answer 3

每次致电：

map = new google.maps.Map(document.getElementById('xx'), mapOptions);

您使用Google地图配额。小心！

Answer 4

在我的情况下帮助重新初始化Google Map并超时解决了这个问题。

 setTimeout(function(){ initialize() }, 30);

通过销毁以前动态创建的元素来杀死初始化实例，但这更难......

在单页应用程序上重用Google Maps API实例

4 个答案: