Question

我正在关注此页面中的MVCObject绑定示例：

http://code.google.com/apis/maps/articles/mvcfun.html

我想更改圆圈的颜色并在用户点击圆圈时切换标记的可见性，因此我将侦听器添加到RadiusWidget构造函数中，如下所示：

function RadiusWidget() {
    var circle = new google.maps.Circle({
      strokeWeight: 2
    });

    this.set('distance', 50);
    this.bindTo('bounds', circle); 
    circle.bindTo('center', this);
    circle.bindTo('map', this);
    circle.bindTo('radius', this);
    this.addSizer_();

    google.maps.event.addListener(circle, 'click', function()
    {
       alert('circle clicked'); 
    });
  }

我的问题是点击事件触发TWICE。有谁知道为什么？

Answer 1

我有类似的问题。它可能是地图API v3中的错误吗？我没有答案，只有解决方法：

google.maps.event.addListener(circle, 'click', function(event) {       
    if (event.alreadyCalled_) {
        alert('circle clicked again'); 
    }
    else {
        alert('circle clicked first time');      
        event.alreadyCalled_ = true;
    }
});

点击仍然会被触发两次，但您可以检测到它。

Answer 2

在原始点击事件触发后，似乎地图API触发了额外的“点击”事件。最好的方法来防止我通过调试发现;

google.maps.event.addListener(marker, 'click', function(event) {
    console.log(event);  //see console for original mouse event     
    var ev = event.b;  //event.b object is original mouse event and might change

    //prevent defualts
    ev.preventDefault();
    ev.stopPropagation();
});

这将防止第二次触发正确。

Answer 3

你在地图上有另一个点击监听器吗？尝试使用mouseEvent.stop()，以便它不会传播到地图。 documentation here

   google.maps.event.addListener(circle, 'click', function(mev) {
           mev.stop();
           alert('circle clicked'); 
   });

可能是行

 circle.bindTo('map', this);

导致它。

Answer 4

这对我有用：

google.maps.event.addListener(circle, 'click', function (e) {
    clearTimeout(this.doNotTriggerTwiceTimeout);
    this.doNotTriggerTwiceTimeout = setTimeout(function(){
        alert('circle clicked');
    }, 100);
});

Answer 5

要实际找到调用该函数的内容，请使用console.log（event）并检查开发人员工具控制台：

google.maps.event.addListener(circle, 'click', function()
{
    alert('circle clicked');
    console.log(event);
});

您应该列出2个事件（如果它们确实触发了两次）。然后检查＆＃34; srcElement＆＃34;事件的属性，以查看哪个元素调用了函数。

从我自己的类似问题中，我发现Google地图事件监听器对于触发该功能的元素不够具体。因此，我使用JQuery事件侦听器替换了Google maps事件侦听器，使其更具体，并通过它的ID属性定位特定元素。

Google Maps事件监听器（解雇两次）

google.maps.event.addDomListener(control, 'click', function() { toggleLabels(); });

JQuery事件监听器（触发一次）

$('body').on('click', '#labels-switch', function(){ toggleLabels(); });

Google Maps Api V3：点击两次事件

5 个答案: