Javascript 在忽略双击的同时处理 Google Maps JS API v3 中的点击事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5329136/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling click events in Google Maps JS API v3 while ignoring double clicks
提问by Pierre
With the Google Maps JS API v3, I want to drop a marker where the user clicks on the map, while keeping the default behavior when the user double clicks (and not adding any marker on the map).
使用 Google Maps JS API v3，我想在用户点击地图的地方放置一个标记，同时保持用户双击时的默认行为（而不是在地图上添加任何标记）。
I thought about defining a timeout on click event. If a double click event is triggered within the next few milliseconds, the timeout is cancelled. If not, the marker is placed on the map when the timeout expires. But it doesn't really look like the best solution ever.
我想过在点击事件上定义超时。如果在接下来的几毫秒内触发了双击事件，则超时被取消。如果不是，则在超时到期时将标记放置在地图上。但它看起来并不是有史以来最好的解决方案。
Is there a more elegant way to handle this?
有没有更优雅的方法来处理这个问题？
Thanks.
谢谢。
采纳答案by rebeliagamer
The easiest way to solve it.
解决它的最简单方法。
var location;
var map = ...
google.maps.event.addListener(map, 'click', function(event) {
mapZoom = map.getZoom();
startLocation = event.latLng;
setTimeout(placeMarker, 600);
});
function placeMarker() {
if(mapZoom == map.getZoom()){
new google.maps.Marker({position: location, map: map});
}
}
shogunpanda's solution is better (see below)
shogunpanda的解决方案更好（见下文）
回答by ShogunPanda
I just found an hackish solution which works but introduce a small waiting time (200ms, this is the minimum to make it work, but I don't know if it is client dependent)
我刚刚找到了一个可行的hackish解决方案，但引入了一个小的等待时间（200ms，这是使其工作的最小值，但我不知道它是否依赖于客户端）
var update_timeout = null;
google.maps.event.addListener(map, 'click', function(event){
update_timeout = setTimeout(function(){
do_something_here();
}, 200);
});
google.maps.event.addListener(map, 'dblclick', function(event) {
clearTimeout(update_timeout);
});
Hope this helps!
希望这可以帮助！
回答by Ravindranath Akila
You can take advantage of, dblclick fires if it is a double click, and single click fires in such occations only once.
您可以利用，如果是双击，则 dblclick 会触发，而在这种情况下，单击只会触发一次。
runIfNotDblClick = function(fun){
if(singleClick){
whateverurfunctionis();
}
};
clearSingleClick = function(fun){
singleClick = false;
};
singleClick = false;
google.maps.event.addListener(map, 'click', function(event) {// duh! :-( google map zoom on double click!
singleClick = true;
setTimeout("runIfNotDblClick()", 500);
});
google.maps.event.addListener(map, 'dblclick', function(event) {// duh! :-( google map zoom on double click!
clearSingleClick();
});
回答by Fabio
If you're using underscore.jsor* lodashhere's a quick and elegant way to solve this problem
如果你使用underscore.js或* lodash这里有一个快速优雅的方法来解决这个问题
// callback is wrapped into a debounce function that is called after
// 400 ms are passed, it provides a cancel function that can be used
// to stop it before it's actually executed
var clickHandler = _.debounce(function(evt) {
// code called on single click only, delayed by 400ms
// adjust delay as needed.
console.debug('Map clicked with', evt);
}, 400);
// configure event listeners for map
google.maps.event.addListener(map, 'click', clickHandler);
google.maps.event.addListener(map, 'dblclick', clickHandler.cancel);
* Debounce.cancel is implemented only in lodash (with this commit), underscore.js does not implement it
回答by James
A cleaner way to implement the setTimeout()approach is to trigger custom events for single clicks.
实现该setTimeout()方法的一种更简洁的方法是为单击触发自定义事件。
The following function takes any Google Maps interface object (e.g. map, marker, polygon etc.) and sets up two custom events:
以下函数采用任何谷歌地图界面对象（例如地图、标记、多边形等）并设置两个自定义事件：
singleclick: called 400ms after a click if no other clicks have occured
singleclick: 如果没有发生其他点击，则在点击后 400 毫秒调用
firstclick: called whenever a click event occurs, unless a click has already occured in the last 400ms (this is handy for showing some kind of immediate click feedback to the user)
firstclick: 每当点击事件发生时调用，除非在过去 400 毫秒内已经发生点击（这对于向用户显示某种即时点击反馈很方便）
function addSingleClickEvents(target) {
var delay = 400;
var clickTimer;
var lastClickTime = 0;
google.maps.event.addListener(target, 'click', handleClick);
google.maps.event.addListener(target, 'dblclick', handleDoubleClick);
function handleClick(e) {
var clickTime = +new Date();
var timeSinceLastClick = clickTime - lastClickTime;
if(timeSinceLastClick > delay) {
google.maps.event.trigger(target, 'firstclick', e);
clickTimer = setTimeout(function() {
google.maps.event.trigger(target, 'singleclick', e);
}, delay);
} else {
clearTimeout(clickTimer);
}
lastClickTime = clickTime;
}
function handleDoubleClick(e) {
clearTimeout(clickTimer);
lastClickTime = +new Date();
}
}
You can use it like so:
你可以像这样使用它：
var map = ....
addSingleClickEvents(map);
google.maps.event.addListener(map, 'singleclick', function(event) {
console.log("Single click detected at: " + event.latLng);
}
回答by GoG
I'm not sure, but if you add event handlers to both 'click' & 'dblclick' events, where you say to put marker on a click, and don't take any action on double click, then you can skip the adding of timeouts (the maps API can differ what is click and what is double click)
我不确定，但是如果您将事件处理程序添加到“click”和“dblclick”事件中，您说在单击时放置标记，并且在双击时不采取任何操作，那么您可以跳过添加超时（地图 API 可以不同什么是点击和什么是双击）
google.maps.event.addListener(map, 'click', function (event) {
placeMarker(event.latLng);
});
google.maps.event.addListener(map, 'dblclick', function(event) {
//DO NOTHING, BECAUSE IT IS DOUBLE CLICK
});
The placeMarker(latLng) is custom added function which adds marker on the given location:
placeMarker(latLng) 是自定义添加的函数，它在给定的位置添加标记：
var marker = new google.maps.Marker({
position: location,
draggable: true,
map: map
});
map.setCenter(location);
