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

看來你是用完全相同的名稱命名變量重寫功能（給他們一個不同的名字）。