Question

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

我使用addMarkers插件的Gmap3选项添加了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();
                }

            }
        }
    }
}

一切都在第一次尝试时运作良好但是当我点击标记然后信息不断弹出时。

意味着如果我有一个标记和一些内容要显示在气泡中，那么当我一直点击相同的标记信息按钮添加一个而另外一个但我需要“我需要关闭旧的信息，如果标记再次点击或其他标记被点击“就像正常的infowindow剂量一样。

希望我能明确指出。

感谢。

Answer 1

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

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

在标记点击关闭infobubble

1 个答案: