Question

我想在地图外使用自定义缩放按钮来节省移动屏幕的空间。我尝试了这个，但按钮不起作用：

HTML：

<button type='button' id='zoomIn'>Zoom in</button>
<button type='button' id='zoomOut'>Zoom out</button>

使用Javascript：

function zoomIn() {
map.setZoom(map.getZoom() + 1);
}

function zoomOut() {
map.setZoom(map.getZoom() - 1);
}

var zoomIn = document.getElementById("zoomIn");
zoomIn.setAttribute("onclick","javascript: zoomIn();");

var zoomOut = document.getElementById("zoomOut");
zoomOut.setAttribute("onclick","javascript: zoomOut();");

Answer 1

似乎您通过使用完全相同的名称命名变量来覆盖函数（给它们一个不同的名称）。

Answer 2

这是附加事件处理程序的一种有趣方式。通常会使用addEventListener：

EventTarget.addEventListener（）方法将指定的EventListener兼容对象添加到调用它的EventTarget上指定事件类型的事件侦听器列表中。事件目标可以是文档中的元素，文档本身，窗口或支持事件的任何其他对象（例如XMLHttpRequest）。

参考：https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

示例：

document.getElementById('zoomIn').addEventListener('click', function () {
    map.setZoom(map.getZoom() + 1);
});

document.getElementById('zoomOut').addEventListener('click', function () {
    map.setZoom(map.getZoom() - 1);
});

由于您正在使用Leaflet，因此将事件附加到DOM元素的最简单方法是使用L.DomEvent：

用于处理DOM事件的实用程序函数

参考：http://leafletjs.com/reference-1.2.0.html#domevent

Leaflet还有一个按ID获取DOM元素的功能：L.DomUtil.get所以你不需要使用document.getElementById：

返回给定其DOM id
的元素

参考：http://leafletjs.com/reference-1.2.0.html#domutil-get

L.DomEvent.on(L.DomUtil.get('zoomIn'), 'click', function () {
    map.setZoom(map.getZoom() + 1);
});

L.DomEvent.on(L.DomUtil.get('zoomOut'), 'click', function () {
    map.setZoom(map.getZoom() - 1);
});

Leaflet的自定义缩放按钮不起作用

2 个答案: