Question

我有一个角度指令，它调用服务在初始页面加载时创建一个谷歌地图，并将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

所以我想出了问题所在。当我在浏览器中检查map元素时，我注意到每当我返回页面时它都是空的，但如果我将self.map.getDiv();记录到控制台，它会向我显示包含所有google map子元素的旧map元素。所以发生了什么，虽然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)
            });
        }
    };
})

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

1 个答案: