php - 在标记上单击关闭信息气泡

Question

我正在使用 Gmap3 jQuery 插件和 infobubble 插件和 php 来获取添加标记的 json 响应。

我使用 Gmap3 插件的 addMarkers 选项添加了 GoogleMap 标记。

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

            }
        }
    }
}

第一次尝试一切正常，但当我点击标记时，信息气泡不断弹出。

意味着如果我有一个标记和一些内容要在气泡中显示，那么当我继续单击相同的标记时，信息气泡会在另一个标记上添加一个，但我需要的是“如果再次单击标记或其他标记，我需要关闭旧的信息气泡被点击“就像正常的信息窗口剂量一样。

希望我能说清楚。

谢谢。

Answer 1

将 infoBubble 声明为 click 处理程序之外的 var，并在那里实例化它。

然后对 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);
            }
        }
    }
}