我发现了一个使用复选框显示标记组的有趣示例： 链接
但有时一个地方有多个类别（例如汉堡、比萨店等），这会导致一个地方出现多个图标（一个用于汉堡，一个用于比萨店等）。
我用单选按钮替换了复选框，并且只能选择一个类别。不幸的是，单击类别不会删除以前显示的标记。我尝试了多种方法，但没有任何效果。
是否可以在单击类别后隐藏所有可见标记并关闭（可能）打开的信息窗口，然后仅显示单击类别中的标记？
修改后的代码（带有单选按钮）：
$(window).load(function (){
var places={
restaurant:{
label:'restaurants',
//the category may be default-checked when you want to
//uncomment the next line
//checked:true,
icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.png' ,
items: [
['Melt Bar and Grill', 41.485345, -81.799047],
['Sloane Pub', 41.486182, -81.824178],
['Spitfire Salon', 41.479670, -81.768430],
['Mahall\'s', 41.476989, -81.781094],
['Szechwan Garden', 41.485615, -81.787890]
]
},
park:{
label:'parks',
//the category may be default-checked when you want to
//uncomment the next line
checked:true,
icon: 'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
items: [
['Lakewood Park', 41.494457, -81.797605],
['Madison Park', 41.476969, -81.781929],
['Tuland Park', 41.464052, -81.788041]
]
}
},
map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 14,
center: new google.maps.LatLng(41.485345, -81.799047),
}
),
infowindow = new google.maps.InfoWindow(),
// a div where we will place the buttons
ctrl=$('<div/>').css({background:'#fff',
border:'1px solid #000',
padding:'4px',
margin:'2px',
textAlign:'center'
});
//now loop over the categories
$.each(places,function(c,category){
//a checkbox fo the category
var cat=$('<input name="xxx" type="radio">',{type:'radio'}).change(function(){
$(this).data('goo').set('map',(this.checked)?map:null);
})
//create a data-property with a google.maps.MVCObject
//this MVC-object will do all the show/hide for the category
.data('goo',new google.maps.MVCObject)
.prop('checked',!!category.checked)
//this will initialize the map-property of the MVCObject
.trigger('change')
//label for the checkbox
.appendTo($('<div/>').css({whiteSpace:'nowrap',textAlign:'left'}).appendTo(ctrl))
.after(category.label);
//loop over the items(markers)
$.each(category.items,function(m,item){
var marker=new google.maps.Marker({
position:new google.maps.LatLng(item[1],item[2]),
title:item[0],
icon:category.icon
});
//bind the map-property of the marker to the map-property
//of the MVCObject that has been stored as checkbox-data
marker.bindTo('map',cat.data('goo'),'map');
google.maps.event.addListener(marker,'click',function(){
infowindow.setContent(item[0]);
infowindow.open(map,this);
});
});
});
//use the buttons-div as map-control
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrl[0]);
}
);
Object literal
来存储对添加到地图但按类别键入的每个标记的引用。通过如此分组的标记，在选择新类别时应该很容易删除整个类别的值或标记。
$(window).load(function (){
// global object to store marker references
var markers={};
var places={
restaurant:{
label:'restaurants',
icon:'http://maps.gstatic.com/mapfiles/markers2/marker.png' ,
items:[
['Melt Bar and Grill', 41.485345, -81.799047],
['Sloane Pub', 41.486182, -81.824178],
['Spitfire Salon', 41.479670, -81.768430],
['Mahall\'s', 41.476989, -81.781094],
['Szechwan Garden', 41.485615, -81.787890]
]
},
park:{
label:'parks',
checked:true,
icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
items:[
['Lakewood Park', 41.494457, -81.797605],
['Madison Park', 41.476969, -81.781929],
['Tuland Park', 41.464052, -81.788041]
]
}
},
map = new google.maps.Map(
document.getElementById('map'),
{
zoom: 14,
center: new google.maps.LatLng(41.485345, -81.799047),
}
),
infowindow = new google.maps.InfoWindow(),
ctrl=$('<div/>').css({
background:'#fff',
border:'1px solid #000',
padding:'4px',
margin:'2px',
textAlign:'center'
});
$.each( places, function( c, category ){
if( !markers.hasOwnProperty( category ) ) markers[ category ]=[];
var cat=$('<input name="xxx" type="radio">',{ type:'radio' } ).change( function(e){
// remove markers from all categories prior to adding new
markers[ category ].forEach(mkr=>mkr.setMap(null))
$(this).data('goo').set('map',( this.checked ) ? map : null );
})
.data('goo',new google.maps.MVCObject)
.prop('checked', !!category.checked )
.trigger('change')
.appendTo($('<div/>').css({ whiteSpace:'nowrap', textAlign:'left' } ).appendTo( ctrl ) )
.after( category.label );
//loop over the items(markers)
$.each(category.items,function(m,item){
var marker=new google.maps.Marker({
position:new google.maps.LatLng(item[1],item[2]),
title:item[0],
icon:category.icon
});
marker.bindTo('map',cat.data('goo'),'map');
google.maps.event.addListener( marker,'click',function(){
infowindow.setContent(item[0]);
infowindow.open(map,this);
});
// add marker to global object, keyed by cateogry
markers[ category ].push( marker )
});
});
map.controls[ google.maps.ControlPosition.TOP_RIGHT ].push( ctrl[0] );
});