Javascript 基于表单显示/隐藏标记'；s选择不'；我什么也不做

我试图在我的谷歌地图上显示/隐藏（或简单地放置-过滤）我的标记（房屋和公寓），这取决于用户从

#功能选择框中选择的功能类型

例如，如果用户选择“游泳池”功能并单击“提交”

按钮，则仅显示具有此功能的标记（房屋/公寓），并隐藏没有游泳池的标记

不幸的是，当我运行代码时，地图上没有任何变化。

JSON房屋和公寓（存储在标记中变量）：

JS/jQuery代码：

$('#filterform').on('submit', function(e) {
    e.preventDefault(); // prevent page from reloading when form is submitted

    $('#map').gmap('set', 'bounds', null); // reset map's bounds
    $('#map').gmap('closeInfoWindow'); // close opened infoWindows

    // store selected features from the 'features' select box into features variable as array
    var features = $("#features").val();

    // for each element of type house/inside houses array
    $(markers.houses).each(function(index, elem){
        //if a house has one of the selected features from 'features' select box - show it on the map, otherwise hide it
        if(jQuery.inArray(features, elem.features) !== -1 || jQuery.inArray(features, elem.features) > -1){
            this.setVisible(true);
        }else{
            this.setVisible(false);
        }
    });

    // ... repeat the same for condos type elements ...
});

更新：

JS/jQuery在地图上创建/放置标记的代码：

$('#map').gmap(mapOptions).bind('init', function(){             
    $(markers.houses).each(function(index, elem){
        $('#map').gmap('addMarker', {
            'position': new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng)),
            'bounds': true,
            'icon': 'house.png'
        });
    });
    $(markers.condos).each(function(index, elem){
        $('#map').gmap('addMarker', {
            'position': new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng)),
            'bounds': true,
            'icon': 'condo.png'
        }); 
    });
});

试试这个。setMap（null）；/这个.setmap（map）

在您的上下文中，“

this

”不是标记元素，它是一个

标记。包含
数组元素，与
elem
->
this===elem
相同

更新：添加带有以下行的标记：

$('#map').gmap(mapOptions).bind('init', function(){     
    markers.housesMarkers = [];     //Adding new property that holds Markers    
    $(markers.houses).each(function(index, elem){
            var position =  new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng));
            var m = new google.maps.Marker({ position:position ,
                                            icon: 'house.png' })
            //Adding markers to array
            markers.housesMarkers.push( m );
            m.setMap( $('#map').gmap('get','map') );

            $('#map').gmap('addBounds',m.getPosition());  ///'bound:true' option
    });
    markers.condosMarkers = [];      //Adding new property that holds Markers
    $(markers.condos).each(function(index, elem){
            var position =  new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng));
            var m = new google.maps.Marker({ position:position ,
                                            icon: 'condo.png' })
            //Adding markers to array
            markers.condosMarkers.push( m );
            m.setMap( $('#map').gmap('get','map') );

            $('#map').gmap('addBounds',m.getPosition());  ///'bound:true' option
    });
});

然后使用以下代码“过滤”（可见/不可见）标记：

$(markers.houses).each(function(index, elem){
    //if a house has one of the selected features from 'features' select box - show it on the map, otherwise hide it
    if(jQuery.inArray(features, elem.features) !== -1 || jQuery.inArray(features, elem.features) > -1){
        markers.housesMarkers[index].setVisible(true);   //for condos -> 'marker.condosMarkers'
    }else{
        markers.housesMarkers[index].setVisible(false);  //for condos -> 'marker.condosMarkers'
    }
});

所有的标记都是先弹出的吗？@AndrewPeacock:是的。最初，当访问页面并完成地图加载时，所有标记都会放置在地图上。但我的所有标记都位于标记数组中，该数组包含两个以上的数组房屋和公寓，因此
标记。房屋
与
$.each（）一起使用
.house
。那么，我怎样才能进入这些房子呢？类似这样：
markers.house[index].setVisible（false）
？@Bob尝试使用
markers[index]
而不是
markers.house[index]
Hmm。无论是
markers[index]
还是
markers.house[index]
都不起作用。地图上现有的标记没有任何作用。@Bob你能发布
标记
对象的结构吗，用该结构更新你的问题吗？它与我在原始文章中提供的JSON结构完全相同。问题是-这样我的标记将失去对地图的引用，因此我无法再次显示它们。相反，我必须重新创建标记，这比简单地将它们隐藏在地图上同时保持参考完整需要更多的时间/处理能力。
$('#map').gmap(mapOptions).bind('init', function(){     
    markers.housesMarkers = [];     //Adding new property that holds Markers    
    $(markers.houses).each(function(index, elem){
            var position =  new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng));
            var m = new google.maps.Marker({ position:position ,
                                            icon: 'house.png' })
            //Adding markers to array
            markers.housesMarkers.push( m );
            m.setMap( $('#map').gmap('get','map') );

            $('#map').gmap('addBounds',m.getPosition());  ///'bound:true' option
    });
    markers.condosMarkers = [];      //Adding new property that holds Markers
    $(markers.condos).each(function(index, elem){
            var position =  new google.maps.LatLng(parseFloat(elem.lat), parseFloat(elem.lng));
            var m = new google.maps.Marker({ position:position ,
                                            icon: 'condo.png' })
            //Adding markers to array
            markers.condosMarkers.push( m );
            m.setMap( $('#map').gmap('get','map') );

            $('#map').gmap('addBounds',m.getPosition());  ///'bound:true' option
    });
});

$(markers.houses).each(function(index, elem){
    //if a house has one of the selected features from 'features' select box - show it on the map, otherwise hide it
    if(jQuery.inArray(features, elem.features) !== -1 || jQuery.inArray(features, elem.features) > -1){
        markers.housesMarkers[index].setVisible(true);   //for condos -> 'marker.condosMarkers'
    }else{
        markers.housesMarkers[index].setVisible(false);  //for condos -> 'marker.condosMarkers'
    }
});