关于清除/删除 Google 地图信息框（自定义信息窗口）的问题

Question

你能看看This Demo并告诉我为什么我不能:

1- 在新信息框打开时关闭任何打开的信息框

2- 当用户点击清除按钮时清除/删除打开的信息框？

这是我的代码

$(document).ready(function() {
    var markers = []; // makers array
  var infoBox = null;
    var myOptions = { // map settings
        zoom: 15,
        center: new google.maps.LatLng(38.721759, -9.151692),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        sensor: 'true'
    }
    var map = new google.maps.Map(document.getElementById("canvas-map"), myOptions);

    var data = [ // map data
    {
        id: 1,
        content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>Sed posuere consectetur est at lobortis. Donec sed odio dui. Donec sed odio dui. Aenean eu leo quam.</span></div><div class="fot"></div>',
        position: {
            lat: 38.721759,
            lng: -9.151692
        }
    },
    {
        id: 2,
        content: '<div class="img"></div><div class="txt"><h1>THIS TITLE</h1><span>This is a test.</span></div><div class="fot"></div>',
        position: {
            lat: 38.720805,
            lng: -9.146585
        }
    }
    ]

    for (var i = 0; i < data.length; i++) {
        var current = data[i];

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(current.position.lat, current.position.lng),
            map: map,
            content: current.content
        });

        markers.push(marker);

        google.maps.event.addListener(markers[i], "click", function(e) {
              infoBox = new InfoBox({
                latlng: this.getPosition(),
                map: map,
                content: this.content
            });
        });
    }


   function clearMap(){
    for(i=0; i<markers.length; i++){
            markers[i].setMap(null);
        }
            markers = [];   
         infoBox.close();
    }

   $("#clear").on("click",function(){
       clearMap();
    });   
});

如你所见，我已经尝试过了

 infoBox.close();

我得到 Uncaught TypeError: undefined is not a function 的 .close() 我也尝试了 .remove() 从地图中删除信息框但是当放大或缩小时该框再次出现在地图上！

为了关闭现有的信息框，我也尝试了

 if (infoBox) {
            infoBox.close();
      }

在下面的 cod 中，但它也没有完成工作！

google.maps.event.addListener(markers[i], "click", function(e) {
 if (infoBox) {
        infoBox.close();
  }
          infoBox = new InfoBox({
            latlng: this.getPosition(),
            map: map,
            content: this.content
        });
    });
}

谢谢，

Answer 1

您的信息框没有 .close() 方法，请改用 .setMap(null)。
如果你只想有一个信息框，只创建一个（第一次打开它，因为它需要一个latlng），并将它移动到适当的标记。需要为 "move" InfoBox

单击 "moves" 信息框的侦听器：

google.maps.event.addListener(markers[i], "click", function (e) {
    if (!infoBox) {
        infoBox = new InfoBox({
            latlng: this.getPosition(),
            map: map,
            content: this.content
        });
    } else {
        infoBox.setOptions({
            map: map,
            content: this.content
        });
        infoBox.setPosition(this.getPosition());
    }
});

/* move the InfoBox
 */
InfoBox.prototype.setPosition = function(latlng) {
    this.latlng_ = latlng;
};

working fiddle

关于清除/删除 Google 地图信息框（自定义信息窗口）的问题

Issue on Clearing/ Removing Google Maps Infobox (Custom InfoWindow)

google-maps

google-maps-api-3

infobox