javascript - 我想通过输入标签为传单标记设置旋转值

Question

我有一个 range 类型的 HTML 输入标签，我想用它来设置传单标记的 rotationAngle 的值。此外，当用户更改 <input> 的值时，必须更新 rotationAngle .

我也在用 https://github.com/bbecquet/Leaflet.RotatedMarker但不能使用用户输入设置值。

我希望随着输入标签值的变化，rotationAngle 继续变化。

Answer 1

您可以使用 setRotationAngle(newAngle) 更新 rotationAngle方法

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>