处理Google Maps JS API v3中的点击事件,同时忽略双击

使用Google Maps JS API v3,我想在用户点击地图时放置一个标记,同时保持用户双击(而不是在地图上添加任何标记)时的默认行为。

我想过点击事件定义超时。 如果在接下来的几毫秒内触发双击事件,超时将被取消。 如果没有,则在超时到期时将标记放置在地图上。 但它并不是真的看起来像有史以来最好的解决scheme。

有没有更好的方法来处理这个问题?

谢谢。

最简单的方法来解决它。

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的解决scheme更好(见下文)

我刚刚发现了一个黑客解决scheme,但它引入了一个小小的等待时间(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); }); 

希望这可以帮助!

如果是双击,则可以利用,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(); }); 

http://www.ilikeplaces.com

如果您使用的是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只在lodash中实现(使用这个提交 ),underscore.js 没有实现它

实现setTimeout()方法的更setTimeout()方法是触发自定义事件来进行单击。

下面的函数使用任何Google Maps界面对象(例如地图,标记,多边形等)并设置两个自定义事件:

singleclick :如果没有其他的点击发生,在点击后称为400ms

firstclick :每当点击事件发生时调用,除非在最近400ms内已经发生了点击(这对于向用户显示某种即时点击反馈很方便)

 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(); } } 

你可以这样使用它:

 var map = .... addSingleClickEvents(map); google.maps.event.addListener(map, 'singleclick', function(event) { console.log("Single click detected at: " + event.latLng); } 

我不确定,但是如果您将事件处理程序添加到“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 }); 

placeMarker(latLng)是自定义添加function,在给定位置添加标记:

 var marker = new google.maps.Marker({ position: location, draggable: true, map: map }); map.setCenter(location);