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

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

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

的EventTarget.addEventListener（）方法将指定的事件监听兼容目的是提供用于在事件目标指定事件类型上调用它的事件监听器的列表。事件目标可以是文档中的元素，文档本身，窗口或任何其他支持事件的对象（如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); 
}); 

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

工具函数来处理DOM事件

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

而且单张有通过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); 
}); 

Answer 2

看来你是用完全相同的名称命名变量重写功能（给他们一个不同的名字）。