如何使用自己的 html 按钮进行传单控制?
How to use own html button for leaflet control?
我在我正在处理的页面上使用传单和传单绘制。我想使用我自己的地图外按钮,而不是地图上的经典传单绘制控件。我找不到有关如何完成或什至可能的示例。我如何 link 将通常在地图按钮上的功能转换为我自己的 OFF-MAP 按钮?
所以基本上我会在地图下方(不在地图上)有一个按钮,例如放大(我假设相同的方法也适用于传单绘制控件)。这感觉应该很容易,但就像我说的,我不知道怎么做。
代码附加了一个点击处理程序来调用地图的方法:
document.querySelector("#zoom").onclick = function() {
map.setZoom(Math.ceil(18*Math.random()));
}
从documentation开始,有很多函数可以修改地图的状态。希望这对您有所帮助!
正如您已经提到的那样,答案已经存在。唯一剩下要做的就是添加 EventListeners 并创建相关函数。下面是一个例子,如果你想触发折线绘制并分别取消它:
html
<div id="map"></div>
<button id="drawPolyline">Draw</button>
<button id="cancelDraw">Cancel Draw</button>
js
// add an event listener to trigger polyline draw
document
.getElementById("drawPolyline")
.addEventListener("click", e => drawPolyline(e));
// add an event listener to cancel polyline draw
document
.getElementById("cancelDraw")
.addEventListener("click", e => cancelDraw(e));
// declare a global variable to store a reference
let polylineDrawHandler;
// store the polyline draw instantiation to a variable to be able
// to disable it later
const drawPolyline = e => {
polylineDrawHandler = new L.Draw.Polyline(map, drawControl.options.polyline);
polylineDrawHandler.enable();
};
const cancelDraw = e => polylineDrawHandler.disable();
我在我正在处理的页面上使用传单和传单绘制。我想使用我自己的地图外按钮,而不是地图上的经典传单绘制控件。我找不到有关如何完成或什至可能的示例。我如何 link 将通常在地图按钮上的功能转换为我自己的 OFF-MAP 按钮?
所以基本上我会在地图下方(不在地图上)有一个按钮,例如放大(我假设相同的方法也适用于传单绘制控件)。这感觉应该很容易,但就像我说的,我不知道怎么做。
代码附加了一个点击处理程序来调用地图的方法:
document.querySelector("#zoom").onclick = function() {
map.setZoom(Math.ceil(18*Math.random()));
}
从documentation开始,有很多函数可以修改地图的状态。希望这对您有所帮助!
正如您已经提到的那样,答案已经存在。唯一剩下要做的就是添加 EventListeners 并创建相关函数。下面是一个例子,如果你想触发折线绘制并分别取消它:
html
<div id="map"></div>
<button id="drawPolyline">Draw</button>
<button id="cancelDraw">Cancel Draw</button>
js
// add an event listener to trigger polyline draw
document
.getElementById("drawPolyline")
.addEventListener("click", e => drawPolyline(e));
// add an event listener to cancel polyline draw
document
.getElementById("cancelDraw")
.addEventListener("click", e => cancelDraw(e));
// declare a global variable to store a reference
let polylineDrawHandler;
// store the polyline draw instantiation to a variable to be able
// to disable it later
const drawPolyline = e => {
polylineDrawHandler = new L.Draw.Polyline(map, drawControl.options.polyline);
polylineDrawHandler.enable();
};
const cancelDraw = e => polylineDrawHandler.disable();