Google Maps/Angular JS：マップの更新でデータが反映されず、マーカーが削除されない

Question

lat/lngの配列をとり、マップ上にプロットするAngularJSメソッドがあります。

$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 = []; 
 
    }); 
 

 
};

それは細かい初めて実行されますが、それに渡されるデータセットが変わると、マップは、ピンの縮小セットを反映するために更新されません。

また、データセットが渡されたとき（filteredPins）にピンを削除する方法についてもわかりません。

Answer 1

#zoomToIncludeMarkersによって初めて作成され、設定された古いマーカーは、新しいマーカーが作成されてから同じマップに設定されるため、地図から自動的には削除されません。私は、呼び出されるたびにこのメソッドに渡されたfilteredPinsのすべてのマーカーをすべて蓄積し始めたと思う。

以前のマーカーを手動で削除する必要があります。

は#zoomToIncludeMarkers

の上部にあるマップからすべてのマーカーをクリアするために、私はちょうど方法を持っていると思い、二度目 #zoomToIncludeMarkersが実行され、ピンのちょうど新しい縮小セットを残し、 filteredPinsが空の場合にも、すべてのピンを削除するには

var markers = []; 

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

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

このようなパターンを利用するには、作成したマーカーをどこかの配列（この場合はmarkers）に保存する必要があります。次のような何かが、これは

を助け

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

希望を行う必要があります