Google Maps API V3：关闭所有已打开的信息窗口

Google Maps API V3 是一种流行的 JavaScript 库，用于在网页上显示交互式地图和其他地理信息。在使用 Google Maps API V3 时，您可能会创建信息窗口（InfoWindow），它们是一种弹出式窗口，当用户单击地图上的标记或其他元素时显示。

问题是，如果用户在地图上单击多个标记并打开了多个信息窗口，则这些窗口可能会重叠，并且不方便关闭。在本文中，我们将讨论如何通过编写代码来解决此问题，以便在打开新信息窗口时自动关闭任何先前打开的信息窗口。

解决方案

要解决此问题，我们需要追踪当前打开的信息窗口，并在打开新的信息窗口之前关闭它们。幸运的是，Google Maps API V3 为实现此功能提供了一种简单的方法 - close 方法。

该方法可应用于 InfoWindow 对象，用于将其关闭。因此，我们可以遍历每个存在的 InfoWindow 对象，并关闭它。随后，在打开新的 InfoWindow 之后，将其设置为当前打开的窗口。

下面是一个完整的示例代码，展示了如何实现这个解决方案：

// www.javascriptcn.com code example
// Create an array to hold all the info windows.
var infoWindows = [];

// Create a variable to hold the current open info window.
var currentInfoWindow = null;

// Function to close all info windows.
function closeAllInfoWindows() {
  for (var i = 0; i < infoWindows.length; i++) {
    infoWindows[i].close();
  }
}

// Loop through each marker and add a click event listener.
markersArray.forEach(function(marker) {

  // Create a new info window for the marker.
  var infoWindow = new google.maps.InfoWindow({
    content: marker.title
  });

  // Push the info window to the array.
  infoWindows.push(infoWindow);

  // Add a click event listener to the marker.
  marker.addListener('click', function() {

    // Close all the info windows.
    closeAllInfoWindows();

    // Open the new info window.
    infoWindow.open(map, marker);

    // Set the new info window as the current one.
    currentInfoWindow = infoWindow;
  });
});

在上面的代码中，我们首先创建了一个空数组 infoWindows，用于存储所有 InfoWindow 对象。然后，我们创建了一个变量 currentInfoWindow，用于记录当前打开的 InfoWindow。该 closeAllInfoWindows 函数遍历 infoWindows 数组，并关闭每个窗口。

接下来，我们通过使用 addListener 方法，将 click 事件添加到每个标记上。当用户单击标记时，我们执行以下操作：

• 调用 closeAllInfoWindows 函数，关闭所有打开的 InfoWindow。
• 通过调用 open 方法打开新的 InfoWindow。
• 将新的 InfoWindow 设置为当前窗口，以便在打开其他 InfoWindow 时可以关闭它。

总结

在本文中，我们讨论了如何通过编写代码来自动关闭 Google Maps API V3 中的所有已打开信息窗口。解决方案包括创建一个数组来存储所有 InfoWindow 对象，并使用 close 方法来关闭它们。我们还演示了如何在打开新的 InfoWindow 之前关闭当前打开的 InfoWindow，并将新的 InfoWindow 设置为当前打开的窗口。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/29879