我正在尝试使用复选框通过类型禁用标记

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. 我在发布的代码： Uncaught ReferenceError: toggleGroup is not defined中遇到JavaScript错误，因为该函数是initMap函数本地的，因此，以您使用的方式从HTML访问它。

   <</p>

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&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

概念证明小提琴