时间戳

首页 > 解决方案 > 我想通过输入标签为传单标记设置旋转值

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

问题描述

我有一个范围类型的 HTML 输入标记，我想用它来设置传单标记的 rotationAngle 值。此外，rotationAngle 必须随着用户更改 的值而更新<input>。

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

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

标签： javascripthtmlcssleaflet

解决方案

您可以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>

推荐阅读