javascript - 根据滑块值增加圆的半径

Question

我现在有一张带有单个标记的地图。我在这个标记周围创建了一个圆形半径。这意味着给定标记位置的服务区域。

我在地图下方实现了一个滑块。现在，我正在尝试基于滑动此滑块来增加圆的半径。

我不知道如何开始。

有谁能够帮我？

var myloc = new L.LatLng(39.9042, 116.4074);
var map = L.map('map').setView(myloc, 15);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'pk.eyJ1Ijoic2FuaW5kcmEiLCJhIjoiY2pqam5qZzZnMHRycTNrbWR3ZGF4Mmd5eSJ9.ZRIVhopMmACa80OQ0yZN3g'
}).addTo(map);

var marker = L.marker(myloc).addTo(map);

var marker = L.marker(myloc).addTo(map);

var circle = L.circle(myloc, {
  color: '#f03',
  weight: 0.1,
  fillColor: '#f03',
  fillOpacity: 0.4,
  radius: 100
}).addTo(map);

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}



function clickCircle(e) {
  var clickedCircle = e.target;
}

$('#myRange').on('change', function() {
  clickCircle();
})

#map {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
}

.search-scope {
  margin-top: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

<div id="map"></div>

<div class="search-scope">
  <input type="range" min="100" max="1000" value="100" class="slider" id="myRange">
  <p>Radius:
    <span id="demo"></span>
  </p>
</div>

标签： javascriptjqueryhtmlleaflet

Answer 1

只需使用这样的.setRadius(radius)方法circle.setRadius(this.value);。当滑块改变时你需要这样做，所以在slider.oninput函数中

请参阅下面的工作示例：

var myloc = new L.LatLng(39.9042, 116.4074);
var map = L.map('map').setView(myloc, 15);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  maxZoom: 18,
  id: 'mapbox.streets',
  accessToken: 'pk.eyJ1Ijoic2FuaW5kcmEiLCJhIjoiY2pqam5qZzZnMHRycTNrbWR3ZGF4Mmd5eSJ9.ZRIVhopMmACa80OQ0yZN3g'
}).addTo(map);

var marker = L.marker(myloc).addTo(map);

var marker = L.marker(myloc).addTo(map);

var circle = L.circle(myloc, {
  color: '#f03',
  weight: 0.1,
  fillColor: '#f03',
  fillOpacity: 0.4,
  radius: 100
}).addTo(map);

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;


slider.oninput = function() {
  output.innerHTML = this.value;
  circle.setRadius(this.value); // Sets the radius of the circle to be the value of the slider
}

function clickCircle(e) {
  var clickedCircle = e.target;
}

/* Removed as was causing error */
/*$('#myRange').on('change', function() {
  clickCircle();
})*/

#map {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
}

.search-scope {
  margin-top: 10px;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>

<div id="map"></div>

<div class="search-scope">
  <input type="range" min="100" max="1000" value="100" class="slider" id="myRange">
  <p>Radius:
    <span id="demo"></span>
  </p>
</div>