Question

使用Google Maps JS API v3，我想删除用户点击地图的标记，同时保留用户双击时的默认行为（而不是在地图上添加任何标记）。

我考虑过定义点击事件的超时。如果在接下来的几毫秒内触发双击事件，则会取消超时。如果不是，则在超时到期时将标记放置在地图上。但它看起来并不是最好的解决方案。

有更优雅的方式来处理这个问题吗？

感谢。

Answer 1

我刚刚发现了一个可行的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);
});

希望这有帮助！

Answer 2

解决问题的最简单方法。

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的解决方案更好（见下文）

Answer 3

如果是双击，你可以利用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

Answer 4

如果您正在使用 ~~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（使用this commit），underscore.js does not implement it

中实现

Answer 5

实施setTimeout()方法的更简洁方法是触发单击的自定义事件。

以下功能会使用任何Google地图界面对象（例如地图，标记，多边形等）并设置两个自定义事件：

singleclick：如果没有其他点击发生，则点击后调用400毫秒

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

您可以像这样使用它：

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

Answer 6

我不确定，但是如果您为'click'和＆amp;添加事件处理程序'dblclick'事件，你说要在点击上放置标记，并且不要在双击时执行任何操作，那么你可以跳过添加超时（地图API可以区别点击什么是双击）< / p>

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）是自定义添加的函数，它在给定位置添加标记：

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

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

6 个答案: