Question

我在google maps V3 API上遇到了一些问题。

这是我的AngularJS指令：

;
(function () {
"use strict";

angular.module('LoVendoApp.directives')
    .directive('map', ['SimpleRETS', 'InfoWindowService', 'McOptions', 'ModalOptions', '$rootScope', '$parse', '$uibModal', '$timeout', 'SafetyFilter',
        function (SimpleRETS, InfoWindowService, McOptions, ModalOptions, $rootScope, $parse, $uibModal, $timeout, SafetyFilter) {
            return {
                restrict: 'A',
                scope: {
                    requestObj: '='
                },
                link: function (scope, el, attrs) {
                    //Creating map instance with GoogleMaps API
                    var map = new google.maps.Map(el[0], {
                        center: {
                            lat: 25.7742700,
                            lng: -80.1936600
                        },
                        zoom: 8
                    });

                    //Markers array
                    var markers = [];
                    console.log('on init = ', markers.length);

                    /**
                     * Creates new google maps
                     * marker
                     *
                     * @param {Object} param
                     * 
                     */

                    function _newGoogleMapsMarker(param) {
                        var r = new google.maps.Marker({
                            map: param._map,
                            position: new google.maps.LatLng(param._lat, param._lng),
                            title: param._head,
                            icon: param._icon
                        });
                        if (param._data) {
                            google.maps.event.addListener(r, 'click', function () {
                                // this -> the marker on which the onclick event is being attached
                                if (!this.getMap()._infoWindow) {
                                    this.getMap()._infoWindow = new google.maps.InfoWindow();
                                }
                                this.getMap()._infoWindow.close();
                                var content = InfoWindowService.getContent(param._data);

                                this.getMap()._infoWindow.setContent(content);
                                //Creates event listener for InfoWindow insances
                                google.maps.event.addListener(this.getMap()._infoWindow, 'domready', function () {
                                    $("#iw_container")
                                        .off("click")
                                        .on("click", modalListener);
                                    //Opens modal when click is listened
                                    function modalListener() {
                                        var modalOptions = ModalOptions.getHouseDetailOptions(param._data);
                                        var modalInstance = $uibModal.open(modalOptions);
                                    }
                                });
                                this.getMap()._infoWindow.open(this.getMap(), this);
                            });
                        }
                        return r;
                    }
                    //Handling request with SimpleRETS service factory
                    scope.$on('loadMap', function () {
                        SimpleRETS.requestHandler(scope.requestObj).then(dataReceived, dataError);

                        function dataReceived(res) {
                            if (markers.length > 0) {
                                for (var k = 0; k > markers.length; k++) {
                                    markers[k].setMap(null);
                                    console.log('removing! #', k);
                                }
                                markers = [];
                                console.log('removed!');
                            }
                            var results = res.filter(SafetyFilter.filterData);
                            $rootScope.globalHousesData = results;
                            if (markers.length == 0)
                                $timeout(loadMarkers(results), 1000);
                        }

                        function dataError(error) {
                            console.log('mapError', error);
                        }

                    });
                    //Randomizes position for matching coordinates
                    function randomPos() {
                        return Math.random() * (0.0001 - 0.00005) + 0.00005;
                    }

                    function loadMarkers(results) {
                        // Fetching marker options from service
                        var options = McOptions.getOptions;
                        for (var i = 0; i < results.length; i++) {
                            var marker = _newGoogleMapsMarker({
                                _map: map,
                                _icon: 'assets/images/icon.png',
                                _lat: results[i].geo.lat,
                                _lng: results[i].geo.lng,
                                _head: '|' + new google.maps.LatLng(results[i].geo.lat, results[i].geo.lng),
                                _data: results[i]
                            });
                            markers.push(marker);
                        }
                        var markerCluster = new MarkerClusterer(map, markers, options);
                    }
                    //Initializes event to load m
                    scope.$broadcast('loadMap');
                }
            }
        }
    ]);

})();

正如您所看到的那样，我已经疯狂地使用console.log来查看我的逻辑有什么问题。它可能看起来有点压倒性但我只有4个主要组件或动作。首先我初始化地图：

 var map = new google.maps.Map(el[0], {
       center: {
          lat: 25.7742700,
          lng: -80.1936600
        },
       zoom: 8
  });

我实例化了一个标记数组：var markers = [];

然后我有两个主要功能。一个创建新标记的人：_newGoogleMapMarkers(param)

此函数采用一个param对象，该对象基本上包含InfoWindow中应该可用的地图对象，位置坐标，图标，标题和一些内容。此外，我正在将onClick监听器连接到所有InfoWindows，以在我的应用程序中打开外部模式。

当markers数组为空时，应触发另一个函数，并使用（SimpleRETS）从外部API加载新数据

这都是由$ $ scope。$ broadcast（＆＃39; loadMap＆＃39;）触发的，每次更改过滤器时触发，用户与某些内容交互等等。

问题在于，即使我在标记数组为空时调用loadMarkers()函数（并且在迭代并执行标记[k] .setMap（null））之后，旧标记仍保留在地图中，每次装载500个标记时，会产生大量标记。我甚至尝试在标记数组在下次加载之前为空时设置1000ms的超时，以查看它是否有任何帮助，但它没有。

那你们觉得怎么样？我很感激您的任何建议。

Answer 1

对于任何可能遇到同样问题的人。如果您正在使用markerclusterer jQuery插件，则必须markerCluster.clearMarkers();，然后在新加载标记后清空markers数组。

所以基本上它最终会看起来像这样

if (markerCluster) {
     markerCluster.clearMarkers();
     markers = [];
}

//Load new markers in the markers array
[...]
//Creating Cluster
markerCluster = new MarkerClusterer(map, markers, options);

然后你会做任何你需要的东西来获取数据并替换标记，因为从地图上的这一点就可以看清标记和簇。

重新加载数据时无法移除Google地图标记

1 个答案: