如何将侦听器设置为传单自定义控件

时间:2018-08-15 21:51:29

标签: javascript leaflet listener

作为Leaflet的新手,我努力尝试弄清楚如何向地图添加自定义控件,以监听clickdblclick事件,从而在dblclick触发{{1 }} 才不是。以前,我是通过在click侦听器内使用setTimeout()在google map上实现此功能的,但这似乎不起作用,因为click似乎被忽略了。我的代码用户是

setTimeout()

请注意,如果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""> </script> </head> <body onload="makeMap()"> <script type="text/javascript"> function makeMap() { var map = L.map('map').setView([37.8, -96], 4); L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); var timeOutAc = []; var myMenu = L.Control.extend({ options: {position: 'topright'}, onAdd: function (map) { this._div = L.DomUtil.create('div'); this._div.innerHTML = "<h2>text</h2>" ; L.DomEvent.on(this._div, "click", this._click) L.DomEvent.on(this._div, "dblclick", this._dblclick ) return this._div; }, _click: function(e){ timeOutAc.push( setTimeout(function(e) { L.DomEvent.stop(e); alert("caught click") }(e),1e4) // timeout set to 10s here... ) }, _dblclick: function(e){ for(var i=timeOutAc.length-2; i<timeOutAc.length; i++) clearTimeout(timeOutAc[i]); L.DomEvent.stop(e); alert("caught dblclick") }, }); map.addControl(new myMenu()); } </script> <table border=1 style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;"> <tr style="height: 100%;"> <td> <div id="map" style="width: 100%; height: 100%;"></div> </td> </tr> </table> </body> </html> 被注释掉,L.DomEvent.on(this._div, "click", this._click)就会被正确捕获。

1 个答案:

答案 0 :(得分:0)

问题出在如何调用setTimeout上。 setTimeout的第一个参数应该是一个函数,如果需要,其参数可以作为setTimeout的第三个(第四,第五个等等)参数。因此将功能_click更改为

           _click: function(e){
              timeOutAc.push(
                 setTimeout(function(e) {
                    L.DomEvent.stop(e);
                    alert("caught click")
                 },250,(e))
              )
           },

解决了问题