处理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(); });
如果您使用的是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);
