如何使用多个复选框组，使用Javascript和Google maps api？

Question

问题：我想在我的Google Maps api 3应用程序中使用多个组（2组）的多个复选框（每组大约9个）。

背景：我是一名业余无线电操作员（Ham），我想在Google地图上显示我的无线电联系人。允许使用不同的频率（频带）以及不同的传输模式（即语音，摩尔斯电码，电传打字机等）。我想选择模式和乐队的不同组合来查看我的联系人。我的2组（乐队和模式）各有8或9个复选框。

我的项目可以在http://www.paulkiener.com/Testing/index.html找到。我的代码如下：

HTML：

<p class="style4"><strong>TESTING:&nbsp; My Contacts</strong></p>

<table border=1>
  <tr>
    <td>
       <div id="map" style="width: 850px; height: 625px"></div>
    </td>
  </tr>
</table>

<div class="MODE">
  <strong>MODE:</strong>&nbsp;<br />
  <span id="myMode">
  <strong>CW<img src="../Test/Learning%20Google%20maps/markers/mm_20_white.png" width="12" height="20" alt="white" /></strong><input type="checkbox" name="Mode" id="CWbox" onclick="boxclick(this,'CW')" /> &nbsp;&nbsp;
  <strong>JT65<img src="../Test/Learning%20Google%20maps/markers/mm_20_blue.png" width="12" height="20" alt="blue" /></strong><input type="checkbox" name="Mode" id="JT65box" onclick="boxclick(this,'JT65')" /> &nbsp;&nbsp;
  <strong>JT9<img src="../Test/Learning%20Google%20maps/markers/mm_20_brown.png" width="12" height="20" alt="brown" /></strong><input type="checkbox" name="Mode" id="JT9box" onclick="boxclick(this,'JT9')" /> &nbsp;&nbsp;
  <strong>LSB<img src="../Test/Learning%20Google%20maps/markers/mm_20_gray.png" width="12" height="20" alt="gray" /></strong><input type="checkbox" name="Mode" id="LSBbox" onclick="boxclick(this,'LSB')" /> &nbsp;&nbsp;
  <strong>MFSK16<img src="../Test/Learning%20Google%20maps/markers/mm_20_green.png" width="12" height="20" alt="green" /></strong><input type="checkbox" name="Mode" id="MFSK16box" onclick="boxclick(this,'MFSK16')" /> &nbsp;&nbsp;
  <strong>PSK31<img src="../Test/Learning%20Google%20maps/markers/mm_20_orange.png" width="12" height="20" alt="orange" /></strong><input type="checkbox" name="Mode" id="PSK31box" onclick="boxclick(this,'PSK31')" /> &nbsp;&nbsp;
  <strong>RTTY<img src="../Test/Learning%20Google%20maps/markers/mm_20_purple.png" width="12" height="20" alt="purple" /></strong><input type="checkbox" name="Mode" id="RTTYbox" onclick="boxclick(this,'RTTY')" /> &nbsp;&nbsp;
  <strong>SSTV<img src="../Test/Learning%20Google%20maps/markers/mm_20_red.png" width="12" height="20" alt="red" /></strong><input type="checkbox" name="Mode" id="SSTVbox" onclick="boxclick(this,'SSTV')" /> &nbsp;&nbsp;
  <strong>USB<img src="../Test/Learning%20Google%20maps/markers/mm_20_yellow.png" width="12" height="20" alt="yellow" /></strong><input type="checkbox" name="Mode" id="USBbox" onclick="boxclick(this,'USB')" /><br />
  </span>
</div>

<div class="BAND">
  <strong>BAND:</strong><br />
  <span id="myBand">
  <strong>10m:</strong><input type="checkbox" name="Band" id="10mbox" onclick="boxclick(this,'10m')" /> &nbsp;&nbsp;
  <strong>12m:</strong><input type="checkbox" name="Band" id="12mbox" onclick="boxclick(this,'12m')" /> &nbsp;&nbsp;
  <strong>15m:</strong><input type="checkbox" name="Band" id="15mbox" onclick="boxclick(this,'15m')" /> &nbsp;&nbsp;
  <strong>17m:</strong><input type="checkbox" name="Band" id="17mbox" onclick="boxclick(this,'17m')" /> &nbsp;&nbsp;
  <strong>20m:</strong><input type="checkbox" name="Band" id="20mbox" onclick="boxclick(this,'20m')" /> &nbsp;&nbsp;
  <strong>30m:</strong><input type="checkbox" name="Band" id="30mbox" onclick="boxclick(this,'30m')" /> &nbsp;&nbsp;
  <strong>40m:</strong><input type="checkbox" name="Band" id="40mbox" onclick="boxclick(this,'40m')" /> &nbsp;&nbsp;
  <strong>80m:</strong><input type="checkbox" name="Band" id="80mbox" onclick="boxclick(this,'80m')" /><br />   
  </span>   
</div>  

和： JavaScript：

    var gmarkers = [];
var gicons = [];
var map = null;

var infowindow = new google.maps.InfoWindow(
 { 
   size: new google.maps.Size(150,50)
});

gicons["red"] = new google.maps.MarkerImage("markers/mm_20_red.png");
var iconImage = new google.maps.MarkerImage('markers/mm_20_red.png');
var iconShadow = new google.maps.MarkerImage('markers/mm_20_shadow.png');

function getMarkerImage(iconColor) {
if ((typeof(iconColor)=="undefined") || (iconColor==null)) { 
  iconColor = "red"; 
}
if (!gicons[iconColor]) {
  gicons[iconColor] = new google.maps.MarkerImage("markers/mm_20_"+ iconColor +".png");
} 
  return gicons[iconColor];
}

function Mode2color(Mode) {
var color = "red";
switch(Mode) {
case "CW": color = "white";
      break;
case "JT65":    color = "blue";
      break;
case "JT9":    color = "brown";
      break;
case "LSB":    color = "gray";
      break;
case "MFSK16":     color = "green";
      break;
case "PSK31":     color = "orange";
      break;
case "RTTY":    color = "purple";
      break;
case "SSTV":     color = "red";
      break;
case "USB":     color = "yellow";
      break;                                                              
default:   color = "black";
      break;
}
   return color;
}

gicons["CW"] = getMarkerImage(Mode2color("CW"));
gicons["JT65"] = getMarkerImage(Mode2color("JT65"));
gicons["JT9"] = getMarkerImage(Mode2color("JT9"));
gicons["LSB"] = getMarkerImage(Mode2color("LSB"));
gicons["MFSK16"] = getMarkerImage(Mode2color("MFSK16"));
gicons["PSK31"] = getMarkerImage(Mode2color("PSK31"));
gicons["RTTY"] = getMarkerImage(Mode2color("RTTY"));
gicons["SSTV"] = getMarkerImage(Mode2color("SSTV"));
gicons["USB"] = getMarkerImage(Mode2color("USB"));

// A function to create the marker and set up the event window
function createMarker(latlng,Call,html,Mode,Band,Contact) {
  var contentString = html;
  var marker = new google.maps.Marker({
     position: latlng,
     icon: gicons[Mode],
     shadow: iconShadow,
     map: map,
     title: name,
     zIndex: Math.round(latlng.lat()*-100000)<<5
  });
// === Store the Mode and Band info as a marker properties ===
     marker.mycategory = Mode;
     marker.myaddress = Band;                                 
     marker.myname = Call;
     marker.mycontact = Contact;
     gmarkers.push(marker);

  google.maps.event.addListener(marker, 'click', function() {
     infowindow.setContent(contentString); 
     infowindow.open(map,marker);
     });
   }

// == shows all markers of a particular Mode, and ensures the checkbox is checked ==
function show(Mode) {
  for (var i=0; i<gmarkers.length; i++) {
    if (gmarkers[i].mycategory == Mode) {
      gmarkers[i].setVisible(true);
    }
  }

// == check the checkbox ==
  document.getElementById(Mode+"box").checked = true;
 }

// == hides all markers of a particular Mode, and ensures the checkbox is cleared ==
   function hide(Mode) {
     for (var i=0; i<gmarkers.length; i++) {
       if (gmarkers[i].mycategory == Mode) {
         gmarkers[i].setVisible(false);
       }
     }

// == clear the checkbox ==
   document.getElementById(Mode+"box").checked = false;

// == close the info window, in case its open on a marker that we just hid
   infowindow.close();
   }

// == a checkbox has been clicked ==
   function boxclick(box,Mode) {
     if (box.checked) {
       show(Mode);
     } else {
   hide(Mode);
     }
   }

   function boxclick(box,Band) {
     if (box.checked) {
       show(Band);
     } else {
       hide(Band);
     }
   }

   function myclick(i) {
     google.maps.event.trigger(gmarkers[i],"click");
   }

   function initialize() {
    var myOptions = {
      zoom: 2,
      center: new google.maps.LatLng(37.9339, -85.3880),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

// Read the data
   downloadUrl("QSO.xml", function(doc) {
  var xml = xmlParse(doc);
  var markers = xml.documentElement.getElementsByTagName("marker");

  for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var Name = markers[i].getAttribute("NAME");
      var QTH = markers[i].getAttribute("QTH");
      var Mode = markers[i].getAttribute("MODE");
      var Call = markers[i].getAttribute("CALL");
      var Band = markers[i].getAttribute("BAND");
      var Country = markers[i].getAttribute("COUNTRY")
      var State = markers[i].getAttribute("STATE")
      var Time = markers[i].getAttribute("TIME")
      var Contact = (Mode + Band)
      var html = "<b>" + Name + "  " + Call +"</b> <br/>" + QTH + " " + State + "<br/>" + Country + "<br/>" + Mode + "  " + Band + "</b> <br/>" + Time + "<br/>";
      // create the marker
      var marker = createMarker(point,Call,html,Mode,Band);
    }

// == show or hide the Mode and Bands initially ==
     show("CW");
     hide("JT65");
     hide("JT9");
     hide("LSB");
     hide("MFSK16");
     hide("PSK31");
     hide("RTTY");
     hide("SSTV");
     hide("USB");
     show("10m");
     show("12m");
     hide("15m");
     hide("17m");
     hide("20m");
     hide("30m");
     hide("40m");
     hide("80m");
   });
 }

我的目标是选择一个或多个“Modes”和一个或多个“Bands”来显示选择查看的正确组合。 （例如，我可能希望在“CW”和“RTTY”（{{1}上看到所有“Modes”和“20m”（40m） }}））。目前，“模式”的复选框正常工作;我需要“Bands”复选框才能工作。