在页面更改时存储谷歌地图对象并在返回时重绘

Question

我有一个角度指令，它调用服务在初始页面加载时创建谷歌地图，并将 Map 对象保存到服务中的数组中。这工作正常。

当用户离开页面然后返回时，该指令应该重绘存储的 map 对象，但这不起作用。我能够创建地图，在第一次页面加载时绘制它，将其保存到数组中，然后从数组中检索它，但是当我调用google.maps.event.trigger(self.map, 'resize');即使self.map是一个谷歌地图对象，也没有任何反应。

是否可以将地图对象保存到数组并在返回页面时重新绘制，还是每次都必须创建一个新的地图对象？

以下是我尝试实现这一目标的方法：

来自指令

if(aggMapServ.maps[$scope.options.index] instanceof google.maps.Map) {
    self.map = aggMapServ.maps[$scope.options.index];
    console.log(self.map); // This is logging a google map object
    google.maps.event.trigger(self.map, 'resize');
}else {
    self.map = aggMapServ.makeMap($scope.options);
}

Answer 1

所以我想出了问题所在。当我在浏览器中检查地图元素时，我注意到每当我返回页面时它都是空的，但是如果我self.map.getDiv();登录到控制台，它会向我显示带有所有谷歌地图子元素的旧地图元素。所以正在发生的事情是，尽管self.map是一个谷歌地图对象，但它仍然引用不再出现在页面上的旧 dom 元素。

因此，经过一些试验和错误，我发现我所要做的就是删除空的map元素并将其替换为self.map.getDiv()返回的元素。我不确定我是否做对了，但它有效，因此非常感谢任何输入。这是我现在的代码：

.directive('aggMap', function(aggMapServ, $timeout) {
    return {
        restrict: 'E',
        scope: {
            'options': '=options'
        },
        transclude: true,
        template: '<div id="{{divId}}"></div><div ng-transclude></div>',
        controllerAs: 'map',
        controller: function () {
            this.map = {};
        },
        link: function (scope, elem, attrs, ctrl) {
            var emptyElem, cachedElem;
            var watcher = scope.$watch('options', function(value) {
                if(value !== undefined) {
                    scope.divId = (value.mapId === undefined) ? 'map-canvas' : value.mapId;
                    $timeout(function() {
                        if(aggMapServ.maps[scope.options.index] instanceof google.maps.Map) {
                            ctrl.map = aggMapServ.maps[scope.options.index];
                            emptyElem = angular.element(document.getElementById(scope.divId));
                            cachedElem = ctrl.map.getDiv();
                            emptyElem.remove();
                            elem.append(cachedElem);
                        }else {
                            ctrl.map = aggMapServ.makeMap(scope.options);
                        }
                    }, 0);
                    watcher();
                }
            });
            elem.on('$destroy', function () {
                google.maps.event.clearInstanceListeners(window);
                google.maps.event.clearInstanceListeners(document);
                google.maps.event.clearInstanceListeners(ctrl.map)
            });
        }
    };
})