我正在尝试使用Checkbox按类型禁用标记

Question

我试图使用复选框按类型禁用标记。标记的坐标及其类型取自PHP后端。标记图标按类型选择。当我取消选中该复选框时，没有任何反应。

请告诉我，我的错误在哪里。

<div id="cities"></div>
<input id="35Checkbox" type="checkbox" onclick="toggleGroup('35')" checked="checked"></input>
<input id="358heckbox" type="checkbox" onclick="toggleGroup('358')" checked="checked"></input>
<input id="10Checkbox" type="checkbox" onclick="toggleGroup('10')" checked="checked"></input>
<input id="0.4Checkbox" type="checkbox" onclick="toggleGroup('0.4')" checked="checked"></input>

    <div id="map"></div>
          <script>
          function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                new ActiveXObject('Microsoft.XMLHTTP') :
                new XMLHttpRequest;

            request.onreadystatechange = function() {
              if (request.readyState == 4) {
                request.onreadystatechange = doNothing;
                callback(request, request.status);
              }
            };
            request.open('GET', url, true);
            request.send(null);
          }
            function doNothing() {}

      function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(47.867206, 31.339497),
      zoom: 14,
      maxZoom: 20, // for max zoom
      minZoom: 12, // for min zoom
     });
              var image_op = {
              35: {url: './image/op35.png',
    scaledSize: new google.maps.Size(20, 65)},
              358: {rl: './image/op35b.png',
    scaledSize: new google.maps.Size(20, 60)},
              10: {url: './image/op10.png',
    scaledSize: new google.maps.Size(13, 37)},
              0.4: {url: './image/op04.png',
    scaledSize: new google.maps.Size(8, 18)},
    };
    var markerGroups = {
            "358": [],
            "35": [],
            "10": [],
            "0.4": []
    };

              downloadUrl('phpsqlinfo_addrow_op.php', function(data) {
              var xml = data.responseXML;

       var markers_op = xml.documentElement.getElementsByTagName('marker_op');

                 Array.prototype.forEach.call(markers_op, function(markerElem) {
                  var n_op = markerElem.getAttribute('n_op');
                  var point_op = new google.maps.LatLng(
                      parseFloat(markerElem.getAttribute('lat')),
                      parseFloat(markerElem.getAttribute('lng')));
                  var type_op = markerElem.getAttribute('type');

                    var icon_op = image_op[type_op] || {};              
                    var marker_op = new google.maps.Marker({
                    icon: icon_op,
                    map: map,
                    type_op:type_op,
                    position: point_op,
                    title:'№ '+ n_op + type_op
                  });

                 markerGroups[type_op].push(marker_op);

                });
              });

         function toggleGroup(type_op) {
         for (var i = 0; i < markerGroups[type_op].length; i++) {
         var marker_op = markerGroups[type_op][i];
         if (!marker_op.getVisible()) {
         marker_op.setVisible(true);
         } else {
         marker_op.setVisible(false);

            }
        }
    }
    } 
     </script>

Answer 1

1. 我发布的代码有一个javascript错误：Uncaught ReferenceError: toggleGroup is not defined，因为该函数是initMap函数的本地函数，它需要是全局的，以便按照您使用它的方式从HTML访问它。
2. 一旦修复，我得到另一个javascript错误：Uncaught ReferenceError: markerGroups is not defined，出于同样的原因（这也是initMap函数的本地），它也需要是全局的。

代码段：

html,
body,
#map {
  height: 90%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

<div id="cities"></div>
<input id="35Checkbox" type="checkbox" onclick="toggleGroup('35')" checked="checked"></input>
<div id="map"></div>

<script>
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(47.867206, 31.339497),
      zoom: 14,
      maxZoom: 20, // for max zoom
      minZoom: 12, // for min zoom
    });

    // downloadUrl('phpsqlinfo_addrow_op.php', function(data) {
    // var xml = data.responseXML;
    var xml = xmlParse(xmlStr);
    var markers_op = xml.documentElement.getElementsByTagName('marker_op');

    Array.prototype.forEach.call(markers_op, function(markerElem) {
      var n_op = markerElem.getAttribute('n_op');
      var point_op = new google.maps.LatLng(
        parseFloat(markerElem.getAttribute('lat')),
        parseFloat(markerElem.getAttribute('lng')));
      var type_op = markerElem.getAttribute('type');

      // var icon_op = image_op[type_op] || {};
      var marker_op = new google.maps.Marker({
        // icon: icon_op,
        map: map,
        type_op: type_op,
        position: point_op,
        title: '№ ' + n_op + type_op
      });

      markerGroups[type_op].push(marker_op);

    });
    // });
  }
  var markerGroups = {
    "358": [],
    "35": [],
    "10": [],
    "0.4": []
  };

  function toggleGroup(type_op) {
    for (var i = 0; i < markerGroups[type_op].length; i++) {
      var marker_op = markerGroups[type_op][i];
      if (!marker_op.getVisible()) {
        marker_op.setVisible(true);
      } else {
        marker_op.setVisible(false);

      }
    }
  }

  function xmlParse(str) {
    if ((typeof ActiveXObject != 'undefined') || ("ActiveXObject" in window)) {
      var doc = new ActiveXObject('Microsoft.XMLDOM');
      doc.loadXML(str);
      return doc;
    }

    if (typeof DOMParser != 'undefined') {
      return (new DOMParser()).parseFromString(str, 'text/xml');
    }

    return document.createElement('div', null);
  }
  var xmlStr = '<markers><marker_op lat="47.867206" lng="31.339497" type="35" /></markers>'
</script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&callback=initMap&ext=.js"></script>

proof of concept fiddle