在谷歌地图 API 3 中仅显示一个信息气泡"at a time"

Question

我正试图让它一次只显示一个信息气泡，换句话说就是切换信息气泡。标记在for循环中被分配了这个事件处理程序，循环通过标记数组。

目前，这是以一种打开信息气泡但从不关闭它的方式工作的。我可以点击多个标记，每个标记都会有信息气泡，而不会关闭前一个

Iv尝试添加infobuble2.close();，但Iv得到的结果是，我必须点击两次标记才能关闭之前的信息气泡。

Iv还尝试使用infoBubble2.isOpen()测试infobubble是否打开，它似乎只是假的。

是的，如果你想知道的话，我已经尝试过信息窗口，使用它的功能很好，但由于设计限制，我需要相应地设置弹出窗口的样式下面是我的代码

  var infoBubble2;
  google.maps.event.addListener(marker, 'click', function() {
             infoBubble2 = new InfoBubble({
                map: map,
                position: new google.maps.LatLng(-35, 151),
                shadowStyle: 1,
                padding: 0,
                backgroundColor: 'rgb(255,255,255)',
                borderRadius: 4,
                arrowSize: 10,
                borderWidth: 1,
                borderColor: '#2c2c2c',
                disableAutoPan: true,
                hideCloseButton: !0,
                arrowPosition: 30,
                backgroundClassName: 'phoney',
                arrowStyle: 2
              });
            infoBubble2.setContent("some content");
            infoBubble2.open(map, marker);
  });

Answer 1

试试这样的东西：

function f_createBalloon(num, marker) {
    balloons[num] = new google.maps.InfoWindow({
        content: ballonInfo[num]
    });
    balloonListeners[num] = new google.maps.event.addListener(marker, 'click',
        function () {
            f_closeBalloons();
            balloons[num].open(map, marker);
        });
}
function f_closeBalloons() {
    for (var j in balloons) {
        if (balloons[j]) balloons[j].close(map, markers[j]);
    }
}

Answer 2

如果你一次只想显示一个对象，那么只创建一个对象并重复使用它，而不是不断创建新对象并尝试管理它们，就像这样：

 var infoBubble2 = new InfoBubble({
    map: map,
    position: new google.maps.LatLng(-35, 151),
    shadowStyle: 1,
    padding: 0,
    backgroundColor: 'rgb(255,255,255)',
    borderRadius: 4,
    arrowSize: 10,
    borderWidth: 1,
    borderColor: '#2c2c2c',
    disableAutoPan: true,
    hideCloseButton: !0,
    arrowPosition: 30,
    backgroundClassName: 'phoney',
    arrowStyle: 2
  });

  google.maps.event.addListener(marker,'click',function() {
    infoBubble2.close();
    infoBubble2.setContent("some content");
    infoBubble2.open(map, marker);
  });

Answer 3

我通过在initialize（）函数外声明infobubble2变量，然后为其赋值new infobubble（）来解决这个问题；在initialize（）中，为每个标记指定的onclick事件打开并填充infobubble的内容。

下面是我所做的。谢谢大家的帮助。

var infoBubble2;
function initialize() {
    var myOptions = {
          zoom: zoom,
          minZoom: 0, maxZoom: 20,
          center: myLatLng,
          mapTypeId: maptype,
          mapTypeControl:false,
          streetViewControl:false,
          panControl:false
      };
   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   infoBubble2 = new InfoBubble({
            map: map,
            position: new google.maps.LatLng(-35, 151),
            shadowStyle: 1,
            padding: 0,
            backgroundColor: 'rgb(255,255,255)',
            borderRadius: 4,
            arrowSize: 10,
            borderWidth: 1,
            borderColor: '#2c2c2c',
            disableAutoPan: true,
            hideCloseButton: !0,
            arrowPosition: 30,
            backgroundClassName: 'phoney',
            arrowStyle: 2
          });
      $.getJSON('include/jsonCatPoints.php', function(data) {
          for(var i=0; i<data.length;i++){
            placeMarker(data[i]['cat_lat'], data[i]['cat_long'], map);
          }
        });

}//ends initialize
function placeMarker(lat, longg, map) {
      var image = 'img/cat_marker.png';
         marker = new google.maps.Marker({
          position: new google.maps.LatLng(lat,longg),
          map: map,
          icon: image
        });
      makeBubble(map, "test" +lat, marker);
       markers.push(marker);
  }//ends placeMarker

function makeBubble(map, contentString, marker) {
  google.maps.event.addListener(marker, 'click', function() {
        infoBubble2.setContent("message"+contentString);
        infoBubble2.open(map, marker)
 });
}// ends makeBubble