通过单选按钮实现Google Maps标记（分组）的显示与隐藏

原示例用复选框实现标记分组显示，但存在同一地点多分类时重复显示图标的问题。改用单选按钮后，切换分类无法隐藏之前显示的标记，需要实现：点击分类时先隐藏所有可见标记、关闭已打开的信息窗口，再仅显示当前分类的标记。

修改方案： #

• 新增数组存储所有分类的MVCObject实例，用于统一控制所有标记的显示/隐藏
• 重写单选按钮的change事件逻辑：先遍历所有分类控制器隐藏全部标记，关闭信息窗口，再单独显示选中分类的标记

修改后的代码： #

$(window).load(function (){

  var places={
    restaurant:{
      label:'restaurants',
      // 默认选中可取消注释下面一行
      //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',
      // 默认选中可取消注释下面一行
      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(),
  // 存储所有分类的控制器，用于统一隐藏标记
  categoryControllers = [],
  
  // 放置单选按钮的容器
  ctrl=$('<div/>').css({background:'#fff',
                        border:'1px solid #000',
                        padding:'4px',
                        margin:'2px',
                        textAlign:'center'
                       });
  
  
  // 遍历所有分类
  $.each(places,function(c,category){
    
    // 创建单选按钮
    var cat=$('<input name="xxx" type="radio">').change(function(){
       // 隐藏所有标记
       categoryControllers.forEach(function(controller) {
         controller.set('map', null);
       });
       // 关闭已打开的信息窗口
       infowindow.close();
       // 显示当前选中分类的标记
       if(this.checked) {
         $(this).data('goo').set('map', map);
       }
    })
      // 绑定MVCObject用于控制分类标记显示
      .data('goo',new google.maps.MVCObject)
      .prop('checked',!!category.checked)
      
      // 初始化标记显示状态
      .trigger('change')
      
      // 添加到容器
      .appendTo($('<div/>').css({whiteSpace:'nowrap',textAlign:'left'}).appendTo(ctrl))
      .after(category.label);
      
    // 将当前分类的控制器存入数组
    categoryControllers.push(cat.data('goo'));
      
    // 遍历分类下的地点，创建标记
    $.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
            });
       
       // 将标记的map属性绑定到分类控制器
       marker.bindTo('map',cat.data('goo'),'map');
       google.maps.event.addListener(marker,'click',function(){
          infowindow.setContent(item[0]);
          infowindow.open(map,this);
       });
    });
      
  });
 
 // 将按钮容器添加到地图控件
 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrl[0]);
});

内容的提问来源于stack exchange，提问作者cyberjarek