清除/删除谷歌地图信息框的问题（自定义信息窗口）答案

【问题标题】：Issue on Clearing/ Removing Google Maps Infobox (Custom InfoWindow)清除/删除谷歌地图信息框的问题（自定义信息窗口）
【发布时间】：2015-01-27 20:51:54
【问题描述】：

你能看看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 for .close() 我还尝试了.remove()，它从地图中删除了信息框，但是当放大或缩小时，该框再次出现在地图上！

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

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

在下面的鳕鱼中，但它也没有完成这项工作！

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

谢谢，

【问题讨论】：

Updated fiddle 与您的链接中的代码有信息框。

标签： google-maps google-maps-api-3 infobox

【解决方案1】：

您的 infoBox 没有 .close() 方法，请改用 .setMap(null)。
如果您只想拥有一个 InfoBox，只需创建一个（第一次打开时，因为它需要一个 latlng），然后将其移动到适当的标记处。需要编写一个方法来“移动”信息框

点击“移动”信息框的监听器：

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

【讨论】：