我正在尝试根据用户从 中选择的特征类型在我的 Google map 上显示/隐藏(或简单地放置 - 过滤)我的标记(房屋和公寓) #features
选择框。
例如 如果用户选择“游泳池”功能并单击提交
按钮 - 仅显示那些具有此功能的标记(房屋/公寓)特征,并隐藏那些没有游泳池的。
不幸的是,当我运行我的代码时,我的 map 上没有任何变化。
房屋和公寓的JSON(存储在 markers 变量中):
({
condos:
[
{Address:'123 Fake St.', Lat:'56.645654', Lng:'23.534546', features:['Swimming Pool','BBQ','..etc..']},
{... another condo with features ...},
{... another condo with features ...},
...
],
houses:
[
{Address:'1 Main Ave.', Lat:'34.765766', Lng:'27.8786674', features:['...','...']},
{... another house with features ...},
{... another house with features ...},
...
]
})
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 上创建/放置标记的代码:
$('#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'
});
});
});
最佳答案
$(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);
}
});
在您的上下文中,'this
' 不是标记元素,它是一个 markers.houses
数组元素,与 elem
相同 -> 这个 === 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'
}
});
关于javascript - 根据表单的选择显示/隐藏标记不做任何事情,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11020514/