根据按钮单击选择标记

时间:2018-08-09 07:12:53

标签: javascript jquery html css leaflet

我有两个标记和两个按钮。默认情况下,如果没有单击任何按钮或没有单击按钮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 &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);

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>

0 个答案:

没有答案