如何使用自己的HTML按钮进行传单控制？

Question

我正在使用的页面上使用传单和传单绘图。我想使用自己的地图外按钮，而不是地图上经典的传单绘制控件。我找不到如何完成或什至可行的例子。如何将地图上按钮上通常具有的功能链接到我自己的 OFF-MAP 按钮上？

因此，基本上，我将在地图下方（而不是在地图上）具有一个例如放大的按钮（我假设相同的方法也适用于传单绘制控件）。感觉应该很简单，但是就像我说我不知道​​怎么做。

Answer 1

您已经提到答案了。剩下要做的只是添加事件监听器并创建相关的函数。这是一个示例，如果您想触发折线绘制并分别取消它：

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();

Demo

Answer 2

JS Fiddle for Random Zoom!

该代码附加了一个点击处理程序，以调用地图的方法：

document.querySelector("#zoom").onclick = function() {
    map.setZoom(Math.ceil(18*Math.random()));
}

在documentation中，有很多功能可以修改地图的状态。希望这会有所帮助！