作为Leaflet的新手,我努力尝试弄清楚如何向地图添加自定义控件,以监听click
和dblclick
事件,从而在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)
就会被正确捕获。
答案 0 :(得分:0)
问题出在如何调用setTimeout
上。 setTimeout
的第一个参数应该是一个函数,如果需要,其参数可以作为setTimeout
的第三个(第四,第五个等等)参数。因此将功能_click
更改为
_click: function(e){
timeOutAc.push(
setTimeout(function(e) {
L.DomEvent.stop(e);
alert("caught click")
},250,(e))
)
},
解决了问题