如何使用angularjs中的下拉值过滤谷歌地图标记？

Question

我是角度和谷歌地图的新手。这里我有 5 个标记，我想使用该下拉值过滤这些标记请任何人帮助我。

示例：如果我选择这是世界上最好的城市！在下拉地图中应该只显示一个标记，即多伦多

如果我选择 This city is live 在下拉地图中应该显示两个标记，即洛杉矶，拉斯维加斯

我已经添加了我的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>
	<br><br>
	<label>Filter Marker </label><br>
	  <select name="singleSelect" ng-model="data.singleSelect">
	<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>
	  <option value="This is the second best city in the world!">This is the second best city in the world!</option>
	  <option value="This city is live">This city is live</option>
	  
    </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

这就是我将如何实现它。我只会写要执行的步骤（算法），而不是实际的代码......

1) 初始状态：下拉列表中未选择任何内容 -> 渲染所有标记（通过循环for (i = 0; i < cities.length; i++){ createMarker(cities[i]);}）

2) 用户选择一些下拉值

3) 清除所有标记 -> 地图没有标记

4) 在下拉列表中按值过滤城市

5) 仅为过滤后的城市渲染标记：for (i = 0; i < filteredCities.length; i++){ createMarker(cities[i]);}

6) 现在您的地图只显示过滤城市的标记

我不太了解 GMaps API，无法告诉您如何删除标记，但应该很容易 :)

Answer 2

我将对提供的示例提出以下更改：

通过select元素的ngChange指令调用filterMarkers函数来渲染选定的城市：

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

这里引入了clearMarkers函数来清除地图上所有渲染的标记：

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

Modified JSFiddle