我创建的每个标记都有一个信息窗口...现在如何通过打开另一个信息窗口来自动关闭一个信息窗口答案

【问题标题】：I have a info window for every marker i have created ...now how to close one info window automatically by opening another我创建的每个标记都有一个信息窗口...现在如何通过打开另一个信息窗口来自动关闭一个信息窗口
【发布时间】：2014-11-05 10:30:07
【问题描述】：

 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
    <script type="text/javascript" src="js/markerwithlabel.js"></script>
    <script type="text/javascript">
        function initMap() {
             var latLng = new google.maps.LatLng(-7.178996,115.5241033);
             var homeLatLng = new google.maps.LatLng(-7.178996,115.5241033);

             var map = new google.maps.Map(document.getElementById('map_canvas'), {
               zoom: 2,
               center: latLng,
               mapTypeId: google.maps.MapTypeId.SATELLITE
             });

             var marker1 = new MarkerWithLabel({
               position: new google.maps.LatLng(12.5, 92.75),
               draggable: false,
               raiseOnDrag: false,
               map: map,
               labelContent: "Andaman",
               labelAnchor: new google.maps.Point(22, 0),
               labelClass: "labels", // the CSS class for the label

             });

             var marker2 = new MarkerWithLabel({
               position: new google.maps.LatLng(1.4293648, 114.0550177),
               draggable: false,
               raiseOnDrag: false,
               map: map,
               labelContent: "Borneo",
               labelAnchor: new google.maps.Point(22, 0),
               labelClass: "labels", // the CSS class for the label

             });


var iw1 = new google.maps.InfoWindow({
               content: "<div class='gm'>mycontent</div>"

             });
             var iw2 = new google.maps.InfoWindow({
               content: "<div class='gm'>mycontent</div>"
             });

 google.maps.event.addListener(marker1, "click", function (e) { iw1.open(map, this); });
             google.maps.event.addListener(marker2, "click", function (e) { iw2.open(map, this); });
</script>

【问题讨论】：

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

【解决方案1】：

将它们全部添加到数组中，然后在您的数组中打开一个窗口循环并调用每个 infowindow 的 close 方法。

所以在代码的开头声明类似

myWindows = [];

每当您创建新的 infoWindow 时，将其添加到此数组中，因此在您的代码中：

var iw1 = new google.maps.InfoWindow({
    content: "<div class='gm'>mycontent</div>"
});
myWindows.push(iW1);

var iw2 = new google.maps.InfoWindow({
    content: "<div class='gm'>mycontent</div>"
});
myWindows.push(iw2);

每当您打开新窗口时，而不仅仅是

iw1.open();

您必须关闭所有 IW（您只需关闭一个，但在所有 IW 上调用 .close() 方法）所以：

for (var i = 0; i < myWindows.length; ++i) {
    myWindows[i].close;
}
iw1.open();

当然，您可以创建用于打开 IW 的函数，让您的生活更轻松。

【讨论】：

我的剧本不太好..你能举一些例子吗
@user3699344 我已经编辑了我的答案以便更容易理解，希望它有所帮助（但如果它更适合你，你可以考虑 MarkSetchell 的答案）

【解决方案2】：

拥有一个可重复使用的信息窗口，如下所示：

// One single re-useable InfoWindow
    infoWindow = new google.maps.InfoWindow();

for(id=0;id<tableids.length;id++){
    layers[id] = new google.maps.FusionTablesLayer({
        map: map,
        suppressInfoWindows: true,
        query: {
            select: 'col2',
            from: tableids[id],
        },
    });

        google.maps.event.addListener(layers[id], 'click', function(e) {
            windowControl(e, infoWindow, map);
        });
}

然后像这样使用它：

// Open the info window at the clicked location
function windowControl(e, infoWindow, map) {

// Now build HTML we want in our InfoWindow
var HTML;
    HTML = "<div class='googft-info-window'>";
    HTML+= "<strong>Reference</strong>: " + Ref  + " ";
    HTML+= "<strong>Date</strong>: " + Date + "&nbsp;&nbsp;";

    HTML +="</div>";

    infoWindow.setOptions({
            content: HTML,
            position: e.latLng,
            pixelOffset: e.pixelOffset
    });
    infoWindow.open(map);

}

【讨论】：