Google Map API V3 — 当用户实际双击时，如何防止标记的鼠标点击事件

Question

我在地图上有一个标记，我想将两个事件绑定到该标记：

1. 点击
2. dblclick

我想执行以下操作：

1. 当用户单击标记时，地图应放大并显示更详细的地图。
2. 我想将"dblclick"事件绑定到同一个标记，以便它将在相邻的"div"元素中加载一些第三方报告。

换句话说，我希望它在用户点击或dblclick时的行为有所不同。但问题是，当我将这些事件绑定到标记并且用户"双击"标记时，"单击"处理程序被触发，我不想让它发生。

当用户双击时，是否也会触发单击事件？如果是这样，如何防止它在用户实际双击时触发"点击"事件？有什么方法可以让我可以在标记的单击和双击事件上执行不同的操作？

Answer 1

这是 API 的一个已知细微差别，您需要安装点击计数器超时，如下所示：

function createMap2() {
  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map2"), myOptions); 
  var doubleClicked=false;
  var clickEvent;
  google.maps.event.addListener(map, 'dblclick', function(event) { 
    doubleClicked=true;
  }); 
  function handleClick() {
    if (!doubleClicked) {
      infoWindow.setPosition(clickEvent.latLng);
      infoWindow.setContent(createInfo(clickEvent));
      infoWindow.open(map);
    }
  }
  google.maps.event.addListener(map, 'click', function(event) { 
    clickEvent = event;
    doubleClicked = false;
    window.setTimeout(handleClick, 250);
  }); 
}

以上代码摘自 http://www.william-map.com/20100506/1/v3click.htm

查看以下链接以获取更多信息：

https://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/YRAvYHngeNkhttps://groups.google.com/forum/?fromgroups=#!topic/google-maps-js-api-v3/2MomDiLMEiw

Answer 2

您可以使用将

单击与双击分开的预处理程序函数。在这种情况下，第二次点击必须在第一次点击的 500 毫秒内：

//Global vars
var G = google.maps;
var clickTimeOut = null;
G.event.addListener(marker,'click',mClick);

function mClick(mev) {
    if (clickTimeOut) {
        window.clearTimeout(clickTimeOut);
        clickTimeOut = null;
        doubleClick(mev);
    }
    else {
        clickTimeOut = window.setTimeout(function(){singleClick(mev)},500);
    }
}
function doubleClick(mev) {
    // handle double click here
}
function singleClick(mev) {
    window.clearTimeout(clckTimeOut);
    clickTimeOut = null;
    // handle single click here
}

mev 是事件处理程序作为参数接收的 mouseEvent 对象。