我有一个关于传单中地图点击的问题。如果我点击地图我想在那里设置一个标记,但如果双击地图我只想放大而不设置标记。所以我有以下代码:
var map = L.map(attrs.id, {
center: [scope.lat, scope.lng],
zoom: 14
});
var marker = L.marker([scope.lat, scope.lng],{draggable: true});
map.on('click', function(event){
marker.setLatLng(event.latlng);
marker.addTo(map);
});
现在的问题是,当我在地图上双击时,也会触发click事件,我想删除该行为。我怎样才能做到这一点?
由于 玛格达
答案 0 :(得分:6)
所以,我找到了一种方法,我仍然不确定,是否有更好的方法来做到这一点。
var map = L.map(attrs.id, {
center: [scope.lat, scope.lng],
zoom: 14
});
map.clicked = 0;
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var marker = L.marker([scope.lat, scope.lng],{draggable: true});
map.on('click', function(event){
map.clicked = map.clicked + 1;
setTimeout(function(){
if(map.clicked == 1){
marker.setLatLng(event.latlng);
marker.addTo(map);
map.clicked = 0;
}
}, 300);
});
map.on('dblclick', function(event){
map.clicked = 0;
map.zoomIn();
});
答案 1 :(得分:1)
在听click
时发生2 x个不需要的dblclick
事件的相同问题。
注意:我希望对同一元素进行单击和双击以执行不同的操作。
我将这种方法改编为我的传单地图,这不是防弹,但消除了99%的冲突:
var timer = 0;
var delay = 200;
var prevent = false;
$("#target")
.on("click", function() {
timer = setTimeout(function() {
if (!prevent) {
doClickAction();
}
prevent = false;
}, delay);
})
.on("dblclick", function() {
clearTimeout(timer);
prevent = true;
doDoubleClickAction();
});
信用:CSS-Tricks
答案 2 :(得分:0)
在最新版本(传单1.4)上,这仍然是一个问题。
我使用的替代方法:
setTimeout
和clearTimeout
的合法用法map.on('click', function(event) {
if (_dblClickTimer !== null) {
return;
}
_dblClickTimer = setTimeout(() => {
// real 'click' event handler here
_dblClickTimer = null;
}, 200);
})
.on("dblclick", function() {
clearTimeout(_dblClickTimer);
_dblClickTimer = null;
// real 'dblclick' handler here (if any). Do not add anything to just have the default zoom behavior
});
请注意,必须测试200
毫秒的延迟。在我的环境中,使用100
之类的值是不够的,因为doubleclick事件是延迟触发的。