Wie kann ich aktualisieren/löschen Markierungen auf Google Maps ngMaps

Question

Ich schaffe und Clustering meine Markierungen mit der markerclusterer Bibliothek und mit diesem Code:

function populateMapLocationData(locations) { 

     NgMap.getMap({id:'map'}).then(function(map) { 
      $scope.assetMap = map; 
      $scope.initMarkerClusterer(locations); 
     }); 

    }; 

    $scope.initMarkerClusterer = function(locations) { 

     $scope.bounds = new google.maps.LatLngBounds(); 
     var markers = $scope.createMarker(locations); 

     var mcOptions = { imagePath: 'https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/images/m' }; 
     var markerCluster = new MarkerClusterer($scope.assetMap, markers, mcOptions); 

     $scope.assetMap.fitBounds($scope.bounds); 
     $scope.assetMap.panToBounds($scope.bounds); 

    }; 

    $scope.createMarker = function(location) { 
     var latLng = new google.maps.LatLng(parseFloat(location.lat), parseFloat(location.lang)); 
     $scope.bounds.extend(latLng); 
     var marker = new google.maps.Marker({position: latLng, title: asset.name}); 
     google.maps.event.addListener(marker, 'click', function() { 

      var infowindow = new google.maps.InfoWindow(); 
      var center = new google.maps.LatLng(parseFloat(asset.lat), parseFloat(asset.lang)); 

      infowindow.setContent("content"); 
      infowindow.setPosition(center); 
      infowindow.open($scope.assetMap); 

      google.maps.event.addListener($scope.assetMap, 'click', function(event) { 
       infowindow.close(); 
      }); 

     }); 

     return marker; 
    }; 

Und das funktioniert gut bei der ersten Iteration.

Kommen Sie, um die populateMapLocationData-Funktion wieder mit neuen Standorten zu treffen, ändern sich die Grenzen und die Karte zentriert und zoomt an die neue Position der neuen Marker, so denke ich, es funktioniert aber alle vorherigen Marker sind noch da.

Was ich erreichen möchte, ist, wenn ich populateMapLocationData mit einem neuen Satz von Standorten aufrufen, löschen Sie die vorhandenen Markierungen und aktualisieren Sie die Karte mit neuen.

Ich habe gesehen markers[key].setMap(null); kann verwendet werden, aber ich hatte keinen Erfolg.

Jede Beratung wird geschätzt, dank

Answer 1

Eigentlich, wenn Sie Google ursprünglichen markerclusterer.js, eine Markierung zu entfernen, müssen Sie nur nutzen, um seine MarkerClusterer.prototype.removeMarker Funktion und eine Reihe von Markierungen entfernen Sie ihr nur zum Glück MarkerClusterer.prototype.removeMarkers verwenden, ngngaps markerclusterer.js ist nur ein Wrapper für das Original. Mehr dazu in Googles documentation

Ex:

vm.dynMarkers = [ {marker1}, {marker2}, ...] // your marker array 
vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {}); // creater your marker cluster 
vm.markerClusterer.removeMarkers(vm.dynMarkers); // remove all markers 

ich ein Plunker Beispiel gemacht haben für Sie zu folgen, wobei ich die ngMaps Beispiel Bibliothek als Basis verwendet, so dass es einfacher für Sie (stellen Sie sicher, verwenden Schlüssel Ihre eigene API): https://plnkr.co/edit/RZNc2KLdO8qmW0o2Kimq?p=preview

Hier ist der eingebettete Code auch:

var app = angular.module('myApp', ['ngMap']); 
 

 
app.controller('mapController', function($http, $interval, NgMap) { 
 
    var vm = this; 
 
    vm.removeAllMarkers = removeAllMarkers; 
 
    vm.dynMarkers = []; 
 
    vm.map; 
 

 
    NgMap.getMap().then(function(map) { 
 
    for (var i = 0; i < 1000; i++) { 
 
     var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]); 
 
     vm.dynMarkers.push(new google.maps.Marker({ 
 
     position: latLng 
 
     })); 
 
    } 
 
    vm.markerClusterer = new MarkerClusterer(map, vm.dynMarkers, {}); 
 
    vm.map = map; 
 
    }); 
 

 
    function removeAllMarkers() { 
 
    vm.markerClusterer.removeMarkers(vm.dynMarkers); 
 
    vm.dynMarkers = []; 
 
    console.log('all markers in cluster removed'); 
 
    } 
 
});

map, 
 
div[map] { 
 
    display: block; 
 
    width: 600px; 
 
    height: 400px; 
 
}

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <title>Dynamic ngMap demo</title> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 
    <script src="https://maps.google.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY"></script> 
 
    <script src="https://code.angularjs.org/1.3.15/angular.js"></script> 
 
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markerclusterer.js"></script> 
 
    <script> 
 
    MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ = 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m'; //changed image path 
 
    </script> 
 
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/scripts/markers.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Marker Cluster</h1> 
 
    <hr /> 
 
    <div ng-controller="mapController as vm"> 
 
    <ng-map zoom="2" center="[43.6650000, -79.4103000]"></ng-map> 
 
    <button ng-click="vm.removeAllMarkers();" type="button">Remove All Markers</button> 
 
    </div> 
 
</body> 
 

 
</html>