Javascript 传单don和x27的自定义缩放按钮；行不通

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

HTML:

---

这是附加eventhandler的一种有趣的方式。通常会使用

addEventListener

：

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

参考：

例如：

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

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

因为您使用的是传单，所以将事件附加到DOM元素的最简单方法是使用

L.DomEvent

：

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

参考：

另外，传单还有一个按ID获取DOM元素的函数：

L.DomUtil.get

，所以您不需要使用

document.getElementById

：

返回给定DOM id的元素

参考：

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

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

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

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