Google Maps/Angular JS: Kartenaktualisierungen, die nicht immer Daten reflektieren und keine Markierungen entfernen können

Question

Ich habe die folgende AngularJS-Methode, die ein Array von lat/lng verwendet und sie auf einer Karte darstellt.

$scope.zoomToIncludeMarkers = function(filteredPins) { 
 

 
    // var defaultLatLng = '38.04973,-49.340406'; 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var infowindow = new google.maps.InfoWindow({}); 
 

 
    infowindow.close(); 
 

 
    filteredPins.forEach(function(c) { 
 
    var latLng = new google.maps.LatLng(c.Latitude, c.Longitude); 
 
    var siteInfo = '<h3>' + c.SiteName + '</h3>' + '<p>' + c.Address1 + '<br/>' + c.Address2 + '<br/>' + c.City + ', ' + c.State + ' ' + c.ZipCode + '</p>'; 
 
    var marker = new google.maps.Marker({ 
 
     position: latLng, 
 
     map: $scope.map, 
 
     icon: '/assets/img/locator.png' 
 
    }); 
 

 
    marker.setMap($scope.map); 
 

 
    bounds.extend(latLng); 
 

 
    if (typeof $scope.map != "undefined") { 
 
     // $log.warn('$scope.map.fitbounnds ran...'); 
 
     // $log.warn('lat/lng: ' + latLng); 
 
     $scope.map.fitBounds(bounds); 
 

 
    } 
 

 
    marker.addListener('click', function() { 
 
     infowindow.close(); 
 
     infowindow.setContent(siteInfo) 
 
     console.log('infowindow.open: ' + infowindow.open); 
 
     infowindow.open($scope.map, this); 
 
     $scope.findSelectedLocations(c.SiteName); 
 
    }); 
 

 
    }); 
 

 
    google.maps.event.addListener(infowindow, 'closeclick', function() { 
 
    console.log('infowindow closed ######'); 
 
    console.log(infowindow); 
 
    // marker.setMap(null); 
 

 
    // $scope.resetSelectLists(); 
 
    $rootScope.filteredData = $scope.dataObject; 
 
    $scope.trialItemsSelected = []; 
 
    }); 
 

 
};

Es läuft das erste Mal in Ordnung, aber als die Datenmenge, die es sich die Karte übergeben wird, nicht aktualisiert, den reduzierten Satz von Stiften zu reflektieren.

Ich bin mir auch nicht sicher, wie ich gehe Pins entfernen, wenn das Dataset (filteredPins) leer ist.

Answer 1

Alte Markierungen, die beim ersten Mal auf der Karte erstellt und auf #zoomToIncludeMarkers gesetzt wurden, werden nicht automatisch aus der Karte entfernt, nur weil neue Markierungen erstellt und dann auf derselben Karte gesetzt werden. Ich vermute, dass Sie nur beginnen, alle Markierungen für alle filteredPins zu akkumulieren, die jemals bei jedem Aufruf in diese Methode übernommen wurden.

Sie müssen vorherige Markierungen manuell entfernen.

Um nur den neuen reduzierten Satz von Stiften zum zweiten Mal #zoomToIncludeMarkers läuft wird zu verlassen und auch alle Pins entfernen, wenn filteredPins leer ist, würde ich nur für das Löschen aller Markierungen aus der Karte an der Spitze der #zoomToIncludeMarkers

eine Methode

var markers = []; 

$scope.zoomToIncludeMarkers = function(filteredPins) { 
    // removeMarkers(); 
    ... 
} 

function removeMarkers() { 
    markers.forEach(function (marker) { 
    marker.setMap(null); 
    }); 
    markers = []; 
} 

Um ein Muster wie dieses zu nutzen, müssen Sie die Marker, die Sie in einem Array erstellt haben, irgendwo speichern (markers in diesem Fall). So etwas wie die folgenden sollten

filteredPins.forEach(function(c) { 
    var latLng = new google.maps.LatLng(c.Latitude, c.Longitude); 
    var marker = new google.maps.Marker({ 
    position: latLng, 
    map: $scope.map, 
    icon: '/assets/img/locator.png' 
    }); 
    markers.push(marker); 

    // FYI: I believe this is redundant. You don't need to manually set the marker on the map if you've already passed in the map via the markeroptions object 
    marker.setMap($scope.map); 
    ... 
} 

Hoffnung tun hilft diese