使用滑块调整传单地图上的亮度

Question

我正在尝试使用滑块调整传单地图的亮度。基本上，使用滑块将地图灯调整为低和高。

这样做的任何帮助都会有所帮助。

Answer 1

你在寻找like this的东西吗？

向HTML添加一个滑块元素：

<input type="range" min="0" max="100" value="0" class="slider" id="opacity-slider">

以下是处理滑块的JavaScript：

var slider = document.getElementById('opacity-slider');
slider.addEventListener('input', function(e) {
  var value = Number(e.target.value);
  var opacity = value / 100;
  tileLayer.setOpacity(opacity);
});

移动滑块时，代码会调整地图的图块层的不透明度。

对于CSS，map div元素的背景颜色设置为黑色：

#map {
  background: black;
}