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

            }
        }
    }
}

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

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

希望我能说清楚一点。

谢谢。

4

1 回答 1

1

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

然后检查infoBubble.isOpen()将是相关的。

从您提供的代码中，您infoBubble在每次单击时创建一个新对象，因此infoBubble.isOpen()检查适用于该新创建的对象。

怎么做

声明var infobubble;为全局变量。

并在 click 事件处理程序中添加下面的行来执行此操作。

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 回答