7

私はGoogleマップV3(添付画像)でInfoboxを使用しています。 Infoboxをクリックしている間、詳細ページに行きたいと思っています。しかし、私は、infoboxにクリックリスナーを追加することはできません。ここで私が使用しているコードは次のとおりです。Googleマップにイベントを追加できませんInfobox

enter image description here

これは私のインフォボックスの設定です:

var ib = new InfoBox({ 
     alignBottom : true, 
     disableAutoPan: false, 
     maxWidth: 0, 
     pixelOffset: new google.maps.Size(-125, -50), 
     zIndex: null, 
     closeBoxURL: "", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     isHidden: false, 
     pane: "floatPane", 
     enableEventPropagation:false 
    }); 

そして、私はこのように、このインフォボックスにリスナーを追加しました:

google.maps.event.addListener(ib, 'domready', function() { 
     if(Ext.get(ib.div_)){ 
      Ext.get(ib.div_).on('click', function(){ 
       console.log('test on click') 
      }, this); 

      Ext.get(ib.div_).on('mousedown', function(){ 
       console.log('test on click') 
      }, this); 
     } 
    }); 

ながらenableEventPropagation = false、イベントはMAPに伝播されませんが、イベントはインフォボックス上で動作していません。

enableEventPropagation = trueの間は、イベント(クリック、マウスダウン)は機能しますが、インフォボックスの他の部分をクリックすると地図や別のマーカーに移動します。

これを解決する方法はありますか?

+0

問題を解決しましたか?はいの場合は、私たちとあなたの答えを共有してください。 – rpelluru

答えて

0

インフォボックスの内容が何であれリスナーをアタッチすることができます。

var boxText = document.createElement('div'); 
var myOptions = { 
    content: boxText, 
    ... 
} 
var ib = new InfoBox(myOptions); 
ib.open(theMap, marker); 
boxText.setAttribute('onclick', 'alert("InfoBox clicked")'); 

それはあなたのために働くでしょうか?

3

Google Mapsのものではなく、domreadyイベントをinfoboxのeventListenerに追加する必要があります。 infoboxのhtmlが画面に表示された後でなければ、イベントをバインドできます。マルチイベントバインディングを防ぐには、新しい情報を読み込む前に他の情報を閉じてください。

infobox= new InfoBox(); 
google.maps.event.addListener(marker, 'click', function() { 
    infobox.close(); 
    infobox= new InfoBox({ ... }); 
    infobox.open(map, this); 
    infobox.addListener("domready", function() { 
    $("#target").on("click", function(e) { /* do something */ }); 
    }); 
}); 
関連する問題