我是角度和谷歌地图的新手.我有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;
}
