Я хочу установить значение поворота для маркера листовки через тег ввода

Question

У меня есть HTML-тег ввода с типом range, который я хочу использовать для установки значения для shiftAngle маркера листовки.Кроме того, должен быть обновлен ротационный угол, когда пользователь изменяет значение <input>.

Также я использую https://github.com/bbecquet/Leaflet.RotatedMarker, но не могу установить значение с помощью пользовательского ввода.

Я хочу, чтобы при изменении значения тега input вращение продолжало изменяться.

Answer 1

Вы можете обновить rotationAngle, используя setRotationAngle(newAngle) метод

var map = L.map('map').setView([50.5, 30.5], 18);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var marker = L.marker([50.5, 30.5], {
  rotationAngle: 0
}).addTo(map);

function updateAngle(input) {
  marker.setRotationAngle(input.value);
}

#map {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height: 80%
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>

<script src="https://cdn.jsdelivr.net/npm/leaflet-rotatedmarker@0.2.0/leaflet.rotatedMarker.min.js"></script>


<input type="number" value="0" min="-360" max="360" onblur="updateAngle(this)">
<div id="map"></div>