使用jquery切换地图比例尺

Question

我正在尝试使用jquery切换我的地图比例尺，取消选中地图比例框不会关闭比例尺，但检查将其打开。我是jquery的新手，但我不确定是什么问题

$(document).ready(function() {
  $("input[name='featured_ad']").on("change", function() {
    var isChecked = $(this).prop("checked");
    if (isChecked) {
      $(".buttons").show();
    } else {
      $(".buttons").hide();
    }
  });
});

$(document).ready(function() {
  $("input[name='featured_ad']").change(function() {
    if ($(this).prop("checked")) {
      $("radio").show();
      $("#checksl").prop("checked", true)
      var scaleLine = L.control.scale();
      map.addControl(scaleLine);
    } else {
      map.removeControl(scaleLine);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input name="featured_ad" value="1" type="checkbox"/>Map Scale
  <div id="radio" class="buttons">
    <input type="radio" name="ad_pack_id" id="checksl"/>Scale bar<br/>
  </div>
</div>

Answer 1

问题是L.control.scale()每次调用它时都会创建一个新的控件实例。因此，您的addControl()和removeControl()指的是控件的2个独立实例。通过在更改处理程序之外设置scaleLine变量，您可以确保只有1个控件实例，然后.removeControl()将能够正确删除它，像这样：

$(document).ready(function() {
  $("input[name='featured_ad']").on("change", function() {
    var isChecked = $(this).prop("checked");
    if (isChecked) {
      $(".buttons").show();
    } else {
      $(".buttons").hide();
    }
  });
});

$(document).ready(function() {
  // set outside of the change handler so we don't get a new instance every time
  // the checkbox is changed
  var scaleLine = L.control.scale();
  $("input[name='featured_ad']").change(function() {
    if ($(this).prop("checked")) {
      $("radio").show();
      $("#checksl").prop("checked", true);
      // add the control instance
      map.addControl(scaleLine);
    } else {
      // remove the control instance
      map.removeControl(scaleLine);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input name="featured_ad" value="1" type="checkbox" />Map Scale
  <div id="radio" class="buttons">
    <input type="radio" name="ad_pack_id" id="checksl" />Scale bar<br/>
  </div>
</div>