Jak filtrować znacznik mapy google przy użyciu wartości rozwijanej w angularjs?

Question

Jestem nowy w mapach kątowych i google. Gdzie mam 5 znaczników, chcę filtrować te znaczniki przy użyciu tej wartości rozwijanej. Pls może mi ktoś pomóc.

przykład: jeśli mam wybrać to najlepsze miasto na świecie w rozwijanym mapa powinna pokazać tylko jeden znacznik, który jest Toronto

Jeśli wybiorę To miasto żyje w rozwijanej mapie powinny wykazywać dwa znacznik, który jest Los Angeles, Las Vegas

dodałem moje 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

chciałbym zaproponować następujące zmiany w przewidzianym przykład:

Invoke filterMarkers funkcji, aby uczynić wybrane miasta poprzez ngChange dyrektywie select element:

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

gdzie clearMarkers funkcja jest wprowadzony, aby usunąć wszystkie świadczone znaczniki na mapie:

$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

Tak to zrealizowałem. Ja po prostu napisz do wykonywania czynności (algorytm), a nie rzeczywisty kod ...

1) stan początkowy: nic nie jest zaznaczone w rozwijanym -> render wszystkie znaki (za pośrednictwem pętli for (i = 0; i < cities.length; i++){ createMarker(cities[i]);})

2) użytkownika wybiera jakąś wartość rozwijaną

3) Usuń wszystkie markery -> mapa jest bez markerów

4) filtry miast pod względem wartości w rozwijanym

5) renderowania markery tylko dla filtrowanych miastach: for (i = 0; i < filteredCities.length; i++){ createMarker(cities[i]);}

6) teraz twoja mapa pokazuje tylko markery filtrowanych miastach

nie wiem GMaps API wystarczy powiedzieć, jak usunąć znacznik, ale to powinno być łatwe :)