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

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

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

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

/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',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 = '


 #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;
}


最佳答案
我建议对提供的示例进行以下更改：
调用filterMarkers函数来渲染select元素的选定城市viangChange指令：

$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
 原文链接：https://www.f2er.com/jquery/427740.html

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

猜你在找的jQuery相关文章