【问题标题】:How to use own html button for leaflet control?如何使用自己的 html 按钮进行传单控制?
【发布时间】:2019-02-13 18:55:49
【问题描述】:

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

所以基本上我会在地图下方(不在地图上)有一个按钮,例如放大(我假设相同的方法也适用于传单绘制控件)。这感觉应该很容易,但就像我说的我不知道怎么做。

【问题讨论】:

标签: javascript leaflet leaflet.draw


【解决方案1】:

正如您已经提到的,答案已经存在。剩下要做的就是添加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();

Demo

【讨论】:

    【解决方案2】:

    JS Fiddle for Random Zoom!

    代码附加了一个点击处理程序来调用地图的方法:

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

    documentation,有很多可以修改地图状态的函数。希望这会有所帮助!

    【讨论】:

    • 感谢 Sunny Pun 的回答。是的,这肯定适用于缩放,但是使用传单绘制控件呢?
    猜你喜欢
    • 2016-10-02
    • 1970-01-01
    • 2017-06-11
    • 1970-01-01
    • 2022-01-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多