我有两个标记和两个按钮。默认情况下,如果没有单击任何按钮或没有单击按钮A,并且在用户拖动滑块时在标记周围绘制一个圆圈。并且当用户单击第二个按钮时,滑块必须在第二个标记中画一个圆圈。我已经尝试过此代码,但不确定如何将圆设置为第二个标记。
let myloc = new L.LatLng(13.7433242, 100.5421583);
let myloc1 = new L.LatLng(14.979900, 102.097771);
let map = L.map('map').setView(myloc, 8);
const scale = ' meter';
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <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);
let marker = L.marker(myloc).addTo(map);
L.marker(myloc1).addTo(map);
$(function() {
var slider = document.getElementById('myRange');
var output = document.getElementById('demo');
output.innerHTML = slider.value + scale;
slider.oninput = function(val) {
output.innerHTML = this.value + scale;
circle.setRadius(this.value);
}
$('.btn-a').on('click', function(e) {
if ($(this).val() == 'First') {
myloc = myloc;
} else if ($(this).val() = 'Second') {
myloc = myloc1;
}
});
let circle = L.circle(myloc, {
color: '#ff0000',
weight: 0.1,
fillColor: '#ff0000',
radius: 0
}).addTo(map);
});
#map {
width: 500px;
height: 400px;
border: 1px solid #AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" />
<div class="container">
<div class="row">
<div id="map"></div>
<div class="scope">
<input type="range" min="0" max="15000" value="0" class="slider" id="myRange">
<p>Radius:
<span id="demo"></span>
</p>
</div>
</div>
<div class="row">
<input type="button" id="btn-first" class="btn-a" value="First">
<input type="button" id="btn-second" class="btn-a" value="Second">
</div>
</div>