Come filtrare l'indicatore della mappa di google utilizzando il valore di dropdown in angularjs?

Question

Sono nuovo di angolare e google maps.qui ho 5 marcatori, voglio filtrare quei marcatori usando quel valore a discesa pls qualcuno può aiutarmi.

esempio: se seleziono Questa è la migliore città del mondo in discesa mappa dovrebbe mostrare solo un marcatore che è Toronto

se seleziono Questa città è dal vivo nel mappa discesa dovrebbe mostrare due marcatore che è Los Angeles, Las Vegas

ho aggiunto il mio demo

/Data 
 
var cities = [ 
 
    { 
 
     city : 'Toronto', 
 
     desc : 'This is the best city in the world!', 
 
     lat : 43.7000, 
 
     long : -79.4000 
 
    }, 
 
    { 
 
     city : 'New York', 
 
     desc : 'This city is aiiiiite!', 
 
     lat : 40.6700, 
 
     long : -73.9400 
 
    }, 
 
    { 
 
     city : 'Chicago', 
 
     desc : 'This is the second best city in the world!', 
 
     lat : 41.8819, 
 
     long : -87.6278 
 
    }, 
 
    { 
 
     city : 'Los Angeles', 
 
     desc : 'This city is live!', 
 
     lat : 34.0500, 
 
     long : -118.2500 
 
    }, 
 
    { 
 
     city : 'Las Vegas', 
 
     desc : 'This city is live!', 
 
     lat : 36.0800, 
 
     long : -115.1522 
 
    } 
 
]; 
 

 
//Angular App Module and Controller 
 
angular.module('mapsApp', []) 
 
.controller('MapCtrl', function ($scope) { 
 

 
    var mapOptions = { 
 
     zoom: 4, 
 
     center: new google.maps.LatLng(40.0000, -98.0000), 
 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
 
    } 
 

 
    $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
    $scope.markers = []; 
 
    
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    
 
    var createMarker = function (info){ 
 
     
 
     var marker = new google.maps.Marker({ 
 
      map: $scope.map, 
 
      position: new google.maps.LatLng(info.lat, info.long), 
 
      title: info.city 
 
     }); 
 
     marker.content = '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div>'; 
 
     
 
     google.maps.event.addListener(marker, 'click', function(){ 
 
      infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content); 
 
      infoWindow.open($scope.map, marker); 
 
     }); 
 
     
 
     $scope.markers.push(marker); 
 
     
 
    } 
 
    
 
    for (i = 0; i < cities.length; i++){ 
 
     createMarker(cities[i]); 
 
    } 
 

 
    $scope.openInfoWindow = function(e, selectedMarker){ 
 
     e.preventDefault(); 
 
     google.maps.event.trigger(selectedMarker, 'click'); 
 
    } 
 

 
});

#map { 
 
    height:420px; 
 
    width:600px; 
 
} 
 
.infoWindowContent { 
 
    font-size: 14px !important; 
 
    border-top: 1px solid #ccc; 
 
    padding-top: 10px; 
 
} 
 
h2 { 
 
    margin-bottom:0; 
 
    margin-top: 0; 
 
}

<div ng-app="mapsApp" ng-controller="MapCtrl"> 
 
    <div id="map"></div> 
 
\t <br><br> 
 
\t <label>Filter Marker </label><br> 
 
\t <select name="singleSelect" ng-model="data.singleSelect"> 
 
\t <option value="0">all</option> 
 
     <option value="This is the best city in the world!">This is the best city in the world!</option> 
 
     <option value="This city is aiiiiite">This city is aiiiiite</option> 
 
\t <option value="This is the second best city in the world!">This is the second best city in the world!</option> 
 
\t <option value="This city is live">This city is live</option> 
 
\t 
 
    </select><br> 
 
    <div id="class" ng-repeat="marker in markers | orderBy : 'title'"> 
 
     <a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a> 
 
    </div> 
 
</div> 
 

Answer 1

proporrei le seguenti modifiche all'esempio fornito:

Invoke filterMarkers funzione di rendere selezionati città tramite ngChange direttiva select elemento:

$scope.filterMarkers = function() { 
    //1.select filtered cities 
    var filteredCities; 
    var cityDesc = $scope.data.singleSelect; 
    if(cityDesc == '0') { 
     filteredCities = cities; 
    } 
    else { 
     filteredCities = cities.filter(function(c){ 
     if(c.desc == cityDesc) 
      return c; 
     }); 
    } 
    //2.update markers on map 
    $scope.clearMarkers(); 
    for (i = 0; i < filteredCities.length; i++) { 
    createMarker(filteredCities[i]); 
    } 
} 

dove viene introdotto clearMarkers funzione per cancellare tutti i marcatori resi sulla mappa:

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

Modified JSFiddle

Answer 2

Ecco come l'avrei implementato. Mi limito a scrivere i passaggi per eseguire (algoritmo), non il codice vero e proprio ...

1) Stato iniziale: nulla è selezionato nel menu a discesa -> rendere tutti i marchi (attraverso un loop for (i = 0; i < cities.length; i++){ createMarker(cities[i]);})

2) l'utente seleziona un valore discesa

3) cancellare tutti i marcatori -> mappa è senza marcatori

4) filtra città di valore in discesa

5) rendering marcatori solo per le città filtrati: for (i = 0; i < filteredCities.length; i++){ createMarker(cities[i]);}

6) adesso la tua mappa mostra solo i marcatori per le città filtrati

io non ne so abbastanza per dirvi, come rimuovere un marcatore GMaps API, ma dovrebbe essere facile :)