Question

在this page上，我会在地图标记上显示带有InfoBubble的Google地图。 InfoBubbles最初是开放的。如果您关闭它们，可以通过单击标记重新打开它们。我想最初关闭InfoBubbles。相关功能（简化为删除不相关的东西）是：

addMarker = function(festivalData, hasPopup) {

    var map = this._map;

    this.marker = new google.maps.Marker({
        position: new google.maps.LatLng(festivalData.latitude, festivalData.longitude),
        map: map
    });

    if (hasPopup) {
        var infoBubble = new InfoBubble({
            map: map,
            content: "<a href='" + festivalData.url + "'>" + festivalData.name + "</a>",
            hideCloseButton: false,
        });

        infoBubble.open(map, this.marker);

        var infoBubbleHandler = function(bubble) {
            return function() {
                if (!bubble.isOpen()) {
                    bubble.open(map, this.marker);
                }
            }
        }(infoBubble);

        google.maps.event.addListener(this.marker, 'click', infoBubbleHandler);
    }
}

我期望通过删除行

infoBubble.open(map, this.marker);

这将实现我的目标，但这只是完全删除了InfoBubbles，因此当您单击标记时它们甚至不会出现。如何使InfoBubbles最初显示为关闭，但是当您单击标记时它们会打开？

Answer 1

将对this.marker的所有引用更改为局部变量，并更改了该处理函数的创建，并按照我认为您希望的方式工作

addMarker = function(festivalData, hasPopup) {

    var map = this._map;

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(festivalData.latitude, festivalData.longitude),
        map: map
    });

    if (hasPopup) {
        var infoBubble = new InfoBubble({
            map: map,
            content: "<a href='" + festivalData.url + "'>" + festivalData.name + "</a>",
            hideCloseButton: false,
        });

        //infoBubble.open(map, this.marker);

        var infoBubbleHandler = function() {
            if (!infoBubble.isOpen()) {
                infoBubble.open(map, marker);
            }
        };

        google.maps.event.addListener(marker, 'click', infoBubbleHandler);
    }
}

Answer 2

这是一种简单的方法，可以在开始时使标记不可见，然后点击

将其弹出

var myLatLng = new google.maps.LatLng(some_lat, some_lng);
var marker = new google.maps.Marker({
        position: myLatLng,
        map: your_map,
        title: some_title,
        zIndex: some_z_index_int,
        clickable: true
    });

infoBubble = new InfoBubble({
      content: '<div>Some label</div>',
      shadowStyle: 1,
      padding: 0,
      backgroundColor: 'rgb(57,57,57)',
      borderRadius: 4,
      arrowSize: 10,
      borderWidth: 1,
      borderColor: '#2c2c2c',
      disableAutoPan: true,
      hideCloseButton: true,
      arrowPosition: 10,
      arrowStyle: 2
    });

google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {

            infoBubble.open(map, marker);
        }
})(marker, i));

Answer 3

这是一种奇怪的行为，我希望在删除 open 电话后它能正常工作。

从头顶开始 - 尝试在打开后立即关闭气泡：

infoBubble.open(map, this.marker);
infoBubble.close();

带有InfoBubbles的Google Map

3 个答案: