Google Maps APIのV3：私は、このページからMVCObject結合の例を、以下の午前二回

Question

を発射するイベントをクリックします。

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

クリックはまだ2回トリガーされますが、検出できます。

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

これにより、2番目のトリガーが正しく防止されます。

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（イベント）を使用し、開発者用ツールのコンソールを確認するには：

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

あなたが持っている必要があります2つのイベントが表示されます（2回トリガーした場合）。 次に、イベントの「srcElement」属性をチェックして、どの要素がその関数を呼び出したかを確認します。

私の似たような問題から、Googleマップのイベントリスナーは、どの要素がその機能をトリガーするのか十分に特定されていないことがわかりました。そこで、私は、GoogleマップのイベントリスナーをJQueryイベントリスナーに置き換え、より具体的にし、特定の要素をID属性でターゲットにしました。

Googleマップイベントリスナー（2回発射）

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

jQueryのイベントリスナー（一度解雇）

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