7

Google Map V3（添付画像）でインフォボックスを利用しています。Infobox をクリックしている間に、詳細ページに移動したいと考えています。しかし、インフォボックスにクリック リスナーを追加できません。私が使用しているコードは次のとおりです。

ここに画像の説明を入力

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

    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、イベント (クリック、マウスダウン) は機能しますが、インフォボックスの他の部分をクリックすると、マップまたは別のマーカーに移動します。

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

4

2 に答える 2

3

domreadyGoogleマップのイベントではなく、インフォボックスのeventListenerにイベントを追加する必要があります。インフォボックスの 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 */ });
  });
});
于 2014-05-16T22:44:03.623 に答える
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")');

それはあなたのために働きますか？

于 2012-10-28T14:46:28.097 に答える