javascript - Google Map API - 如何在不刷新 map 的情况下过滤添加到 map 的标记？

Question

我有一个使用 Google Map API 的 Angular JS 模块。 Map被定义为一个全局变量，还有一个带有标记的全局数组，以及移除标记、重置 map 和添加标记的方法。

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() - 它调用 removeExistingMarkersFromTheMap() - 然后调用 placeMarkersOnMap()。它有效，但我希望能够在不重新加载 map 本身的情况下在 map 上显示新数据。

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

Answer 1

由于您正在使用 MarkerClusterer class为了显示标记，以下从 map 中删除现有标记的方法不再有效:

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

相反，您可以使用 clearMarkers 函数，这反过来:

Clears all clusters and markers from the clusterer

另一方面，与其在服务中实例化 map 对象，我建议为 Controller 或指令保留此 Angular 色。

话虽如此，下面演示的是gmapService服务的修改版本:

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


    var markerCluster;

    googleMapService.removeExistingMarkersFromTheMap = function () {
        if (!markerCluster) return;
        markerCluster.clearMarkers();
    }


    googleMapService.placeMarkersOnMap = function (map, data) {
        var markers = [];

        this.removeExistingMarkersFromTheMap(); //ensure first that existing markers have been removed
        for (var i = 0; i < data.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data[i].lat,data[i].lng),
                //icon: icon
            });
            markers.push(marker);
        }

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

工作示例

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

    
    var markerCluster;

    googleMapService.removeExistingMarkersFromTheMap = function () {
        if (!markerCluster) return;
        markerCluster.clearMarkers();
    }


    googleMapService.placeMarkersOnMap = function (map, data) {
        var markers = [];

        this.removeExistingMarkersFromTheMap(); //ensure first that existing markers have been removed
        for (var i = 0; i < data.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(data[i].lat,data[i].lng),
                //icon: icon
            });
            markers.push(marker);
        }

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

var app = angular.module('mapApp', ['gmapService']);

app.controller('mapCtrl', function ($scope, gmapService) {
    $scope.locations = [
            { Id: 1, name: 'Oslo', lat: 59.923043, lng: 10.752839 },
            { Id: 2, name: 'Stockholm', lat: 59.339025, lng: 18.065818 },
            { Id: 3, name: 'Copenhagen', lat: 55.675507, lng: 12.574227 },
            { Id: 4, name: 'Berlin', lat: 52.521248, lng: 13.399038 },
            { Id: 5, name: 'Paris', lat: 48.856127, lng: 2.346525 }
    ];

    $scope.initMap = function () {
        $scope.map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: 59.339025, lng: 18.065818 },
            zoom: 4
        });

        var btnAdd = document.getElementById('btnAdd');
        $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push(btnAdd);
        var btnRemove = document.getElementById('btnRemove');
        $scope.map.controls[google.maps.ControlPosition.TOP_LEFT].push(btnRemove);


        $scope.addMarkers = function () {
            gmapService.placeMarkersOnMap($scope.map, $scope.locations);
        };

        $scope.removeMarkers = function () {
            gmapService.removeExistingMarkersFromTheMap();
        };
    };

   
    $scope.initMap();
});

html, body {
    height: 400px;
    margin: 0;
    padding: 0;
}

#map {
    height: 400px;
}

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script> 
<div ng-app="mapApp" ng-controller="mapCtrl">
        <button id="btnAdd" ng-click="addMarkers()">Add markers</button>
        <button id="btnRemove" ng-click="removeMarkers()">Remove markers</button>
        <div id="map"></div>
 </div>

Demo on Codepen