单张隐藏和显示图层

Question

在使用gmaps之前，我只是尝试了传单。我在隐藏图层时遇到了一些障碍。我正在处理多层，由于重叠的层太多，我想添加一个按钮来隐藏和显示某些层。

<?php foreach ($map_link->result_array() as $i) : ?>
    $('#<?= $i['maplink_var'];?>').click(function(){
      <?= $i['maplink_var'];?>.setMap($(this).is(':checked') ? map : null);
    });
  <?php endforeach; ?>

  $('#dataLine,#dataGon,#dataMark').removeAttr('disabled');

  $('#all').click(function(){
    <?php foreach ($map_link->result_array() as $i) : ?>
      <?= $i['maplink_var']; ?>.setMap($(this).is(':checked') ? map : null);
    <?php endforeach; ?>
  });

  $(document).ready(function() {
    $('#all').click(function() {
      var checked = $(this).prop('checked');
      $('#checkboxes').find('input:checkbox').prop('checked', checked);
    });
  });

  var map = new L.Map('map', {zoom: 8, center: new L.latLng([-2.9365327,  104.4950964]) });


  map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer
  <?php foreach ($map_link->result_array() as $i) :?>


    var <?= $i['maplink_var']; ?> = new L.GeoJSON(<?= $i['maplink_var']; ?>, {
      style: function(feature) {
        return {color: feature.properties.color };
      },
      onEachFeature: function(feature, marker) {
       const p = feature.properties;
       p.title = 'p.Name';

       marker.on('click', function (e) {

         var idlink="<?php echo $i['maplink_var']; ?>";
         var aab=feature.properties.ID;
         var numlat =  e.latlng.lat;
         var nlat = numlat.toFixed(3);
         var numlng = e.latlng.lng;
         var nlng = numlng.toFixed(3);

         marker.bindPopup('<td>'+feature.properties.Name+'</td><td>'+ nlat  +'</td><td>'+ nlng +'</td>');
       });

     }
   });
    map.addLayer(<?= $i['maplink_var']; ?>);
  <?php endforeach; ?>

  var searchControl = new L.Control.Search({
    layer: L.featureGroup([dataLine,dataGon,dataMark]),
    propertyName: 'title',
    marker:false,
    moveToLocation: function(latlng, title, map) {
      var zoom;
      if (latlng.layer.feature.geometry.type == 'Polyline') {
        zoom = map.getBoundsZoom(latlng.layer.getBounds());
        map.setView(latlng, zoom); // access the zoom
      }
      else {
        lastStateLayerFound = null;
        zoom = 15;
      }
      map.setView(latlng, zoom);
    }
  });


  searchControl.on('search:locationfound', function(e) {
    e.layer.setStyle({fillColor: 'red', color: 'red'});       
    if(e.layer._popup)
      e.layer.openPopup();
  }).on('search:collapsed', function(e) {
    featuresLayer.eachLayer(function(layer) { //restore feature color
      featuresLayer.resetStyle(layer);
    }); 
  });
  map.addControl( searchControl );  //inizialize search control*/

我的脚本没有错误，但是问题仅在于隐藏和显示不适用于我的代码。

我将此用于按钮

 <ul class="list-group">
  <li class="list-group-item">
    PolyLine
    <div class="material-switch pull-right">
      <input id="dataLine" name="someSwitchOption001" type="checkbox" checked="checked"/>
      <label for="dataLine" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Polygons
    <div class="material-switch pull-right">
      <input id="dataGon" name="someSwitchOption001" type="checkbox" checked="checked"/>
      <label for="dataGon" class="label-success"></label>
    </div>
  </li>
  <li class="list-group-item">
    Markers
    <div class="material-switch pull-right">
      <input id="dataMark" name="someSwitchOption001" type="checkbox" checked="checked"/>
      <label for="dataMark" class="label-success"></label>
    </div>
  </li>
</ul>