Javascript 谷歌地图API-如何过滤添加到地图的标记而不刷新地图？

我有一个Angular JS模块，在那里我使用谷歌地图API。地图被定义为一个全局变量，还有一个带有标记的全局数组，以及用于删除标记、重置地图和向地图添加标记的方法

angular.module('gmapService', []).factory('gmapService', function($rootScope, $http){
    var googleMapService = {};

    var map;
    var markers = [];

function removeExistingMarkersFromTheMap() {
        for (var i = 0; i < markers.length; i++ ) {
            markers[i].setMap(null);
        }
        markers.length = 0;
}

var resetMap = function() {

        var oldZoom = map.zoom;
        var oldCenter = map.center;

        map = new google.maps.Map(document.getElementById('map'), {
            zoom: oldZoom,
            center: oldCenter
        });

        removeExistingMarkersFromTheMap();
    }

googleMapService.placeMarkersOnMap = function(map, markersToPut) {
    // here I call the webservice, get data for markers, and based on that data I create markers
    for(var i=0; i<data.length; i++) {
        var marker = new google.maps.Marker({
                    position: latLng,
                    icon: icon
                    });
            markers.push(marker);
        }

        var mcOptions = {gridSize: 60, minZoom: 4, maxZoom: 12};
        var mc = new MarkerClusterer(map, markers, mcOptions);
    }
return googleMapService;
}

现在我调用resetMap，它调用RemoveExistingMarkersfromMap，然后调用placeMarkersOnMap。它可以工作，但我希望能够在地图上显示新数据，而无需重新加载地图本身

不幸的是，当我只调用RemoveExistingMarkersfromMap和placeMarkersOnMap时，我仍然看到旧数据。我做错了什么？

由于您正在使用以下方法显示标记，因此从地图中删除现有标记的方法不再有效：

for (var i = 0; i < markers.length; i++ ) {
    markers[i].setMap(null);
}
markers.length = 0;

工作示例

angular.module'gmapService'，[].factory'gmapService'，函数$rootScope，$http{ var googleMapService={}； var-markerCluster； googleMapService.RemoveExistingMarkers fromMap=函数{ 如果！markerCluster返回； markerCluster.clearMarkers； } googleMapService.placeMarkersOnMap=函数映射，数据{ var标记=[]； this.removeExistingMarkers fromMap；//首先确保已删除现有标记 对于变量i=0；i

for (var i = 0; i < markers.length; i++ ) {
    markers[i].setMap(null);
}
markers.length = 0;

工作示例

angular.module'gmapService'，[].factory'gmapService'，函数$rootScope，$http{ var googleMapService={}； var-markerCluster； googleMapService.RemoveExistingMarkers fromMap=函数{ 如果！markerCluster返回； markerCluster.clearMarkers； } googleMapService.placeMarkersOnMap=函数映射，数据{ var标记=[]； this.removeExistingMarkers fromMap；//首先确保已删除现有标记 对于变量i=0；i另一方面，我建议将此角色保留为控制器或指令，而不是在服务中实例化映射对象@Vadim Gremyachev您能解释一下为什么在控制器中处理映射更好吗？@user3766930，在我看来，这里的工厂更适合于操作映射对象，而不是从另一方面从HTML元素创建它，而不是在服务中实例化映射对象。我建议将此角色保留为控制器或指令@Vadim Gremyachev您能解释一下为什么在控制器中处理映射更好吗？@user3766930，在我看来，这里的工厂更适合于操作映射对象，而不是从HTML元素创建它