3

Gmap3プラグインとphpでjQueryプラグインを使用infobubbleして、マーカーを追加するためのjson応答を取得しています。

プラグインaddMarkersのオプションを使用して GoogleMap マーカーを追加しました。Gmap3

{
    action: 'addMarkers',
    markers:address_data,
    marker:
    {
        options:
        {
            draggable: false,
            icon: HOST+'img/icons/google_marker.png',
            animation: google.maps.Animation.DROP
        },
        events:
        {
            click: function(marker, event, data)
            {
                var map = $(this).gmap3('get');

                infoBubble = new InfoBubble({
                    maxWidth: 310,
                    shadowStyle: 1,
                    padding: 5,
                    borderRadius: 10,
                    arrowSize: 20,
                    borderWidth: 5,
                    borderColor: '#CCC',
                    disableAutoPan: true,
                    hideCloseButton: false,
                    arrowPosition: 50,
                    arrowStyle: 0
                });

                if (!infoBubble.isOpen())
                {
                    infoBubble.setContent(data);
                    infoBubble.open(map, marker);
                    console.log('open');
                }
                else
                {
                    infoBubble.close();
                }

            }
        }
    }
}

最初の試行ではすべてがうまく機能していますが、マーカーをクリックすると、infobubble がポップアップし続けます。

バブルに表示する 1 つのマーカーといくつかのコンテンツがある場合、同じマーカーをクリックし続けると、infobubble が別のマーカーに追加されますが、「マーカーが再度クリックされた場合、または他のマーカーがクリックされた場合は、古い infobubble を閉じる必要があります」通常のようにインフォウィンドウ用量。

私が明確な点を指摘できることを願っています。

ありがとう。

4

1 に答える 1

1

ハンドラinfoBubbleの外側で var として宣言し、そこでインスタンス化します。click

次に、のチェックinfoBubble.isOpen()が関連します。

提供したコードから、infoBubbleクリックするたびに新しいinfoBubble.isOpen()オブジェクトを作成するため、新しく作成されたオブジェクトにチェックが適用されます。

どうやってするの

var infobubble;グローバル変数として宣言します。

クリックイベントハンドラーの内側に、それを行う行の下に追加します。

if( infoBubble != null ) { infoBubble.close(); }

コードは次のようになります。

var infobubble;
//other code for getting markers and all and then `addMarkers` code
{
    action: 'addMarkers',
    markers:address_data,
    marker:
    {
        options:
        {
            draggable: false,
            icon: HOST+'img/icons/google_marker.png',
            animation: google.maps.Animation.DROP
        },
        events:
        {
            click: function(marker, event, data)
            {
                var map = $(this).gmap3('get');

                if( infoBubble != null ) { infoBubble.close(); }

                infoBubble = new InfoBubble({
                    maxWidth: 310,
                    shadowStyle: 1,
                    padding: 5,
                    borderRadius: 10,
                    arrowSize: 20,
                    borderWidth: 5,
                    borderColor: '#CCC',
                    disableAutoPan: true,
                    hideCloseButton: false,
                    arrowPosition: 50,
                    arrowStyle: 0
                });

                infoBubble.setContent(data);
                infoBubble.open(map, marker);
            }
        }
    }
}
于 2013-04-10T06:38:45.730 に答える