Question

我有Angular JS模块，我使用Google Map API。 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（）。它有效，但我希望有可能在地图上显示新数据而无需重新加载地图本身。

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

Answer 1

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

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

相反，您可以使用clearMarkers函数，而这又是：

清除群集器中的所有群集和标记

从另一方面来说，不是在服务中实例化地图对象，而是建议将此角色保留在控制器或指令中。

话虽如此，下面将演示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;
});

工作示例

＆＃13;

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();
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Demo on Codepen

Google Map API - 如何过滤添加到地图中的标记而不刷新地图？

1 个答案: