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

我是angular和google地图的新手。这里我有5个标记，我想用这个下拉值过滤这些标记，请任何人帮我

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

如果我选择这个城市是生活在下拉地图应该显示两个标记，这是洛杉矶，拉斯维加斯

我已经添加了我的

/Data
var城市=[
{
城市：'多伦多'，
描述：“这是世界上最好的城市！”，
拉脱维亚：43.7000，
长：-79.4000
},
{
城市：“纽约”，
描述：“这座城市很美丽！”，
拉脱维亚：40.6700，
长：-73.9400
},
{
城市：'芝加哥'，
描述：“这是世界上第二好的城市！”，
纬度：41.8819，
长：-87.6278
},
{
城市：“洛杉矶”，
描述：“这个城市是活的！”，
拉脱维亚：34.0500，
长：-118.2500
},
{
城市：“拉斯维加斯”，
描述：“这个城市是活的！”，
拉脱维亚：36.0800，
长：-115.1522
}
];
//角度应用程序模块和控制器
角度.module（'mapsApp'，[]）
.controller（'MapCtrl'，函数（$scope）{
变量映射选项={
缩放：4，
中心：新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=函数（信息）{
var marker=new google.maps.marker({
map:$scope.map，
位置：新google.maps.LatLng（info.lat，info.long），
标题：信息城
});
marker.content=''+info.desc+''+info.city+''；
google.maps.event.addListener（标记'click'，函数（）{
infoWindow.setContent（“”+marker.title+“”+marker.content）；
infoWindow.open（$scope.map，marker）；
});
$scope.markers.push（marker）；
}  
对于（i=0；i
#地图{
高度：420px；
宽度：600px；
}
.infoWindowContent{
字体大小：14px！重要；
边框顶部：1px实心#ccc；
填充顶部：10px；
}
氢{
页边距底部：0；
边际上限：0；
}




过滤标记

全部的
这是世界上最好的城市！
这座城市太美了
这是世界上第二好的城市！
这个城市是活的


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

1） 初始状态：在下拉菜单->渲染所有标记中未选择任何内容（通过（i=0；i

）

2） 用户选择一些下拉值

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

4） 按下拉列表中的值筛选城市

5） 仅为过滤后的城市渲染标记：

for（i=0；i

6） 现在，地图仅显示过滤城市的标记

---

我对GMaps API了解不够，无法告诉您如何删除标记，但这应该很容易：）

我建议对提供的示例进行以下更改：

调用

filterMarkers

函数，通过

select

元素的

ngChange

指令呈现选定的城市：

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

---

您能为这个添加JSFIDLE吗？我已经说过：不，我没有时间写实际的代码。我希望算法步骤足够清晰：）事实上，我对angular和google地图还不熟悉，这就是为什么我要求添加fiddle抱歉

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