Google Maps API V3 是一种流行的 JavaScript 库，用于在网页上显示交互式地图和其他地理信息。在使用 Google Maps API V3 时，您可能会创建信息窗口（InfoWindow），它们是一种弹出式窗口，当用户单击地图上的标记或其他元素时显示。
问题是，如果用户在地图上单击多个标记并打开了多个信息窗口，则这些窗口可能会重叠，并且不方便关闭。在本文中，我们将讨论如何通过编写代码来解决此问题，以便在打开新信息窗口时自动关闭任何先前打开的信息窗口。
解决方案
要解决此问题，我们需要追踪当前打开的信息窗口，并在打开新的信息窗口之前关闭它们。幸运的是，Google Maps API V3 为实现此功能提供了一种简单的方法 - close 方法。
该方法可应用于 InfoWindow 对象，用于将其关闭。因此，我们可以遍历每个存在的 InfoWindow 对象，并关闭它。随后，在打开新的 InfoWindow 之后，将其设置为当前打开的窗口。
下面是一个完整的示例代码，展示了如何实现这个解决方案：
-- ------ -- ----- -- ---- --- --- ---- --------
--- ----------- - ---
-- ------ - -------- -- ---- --- ------- ---- ---- -------
--- ----------------- - -----
-- -------- -- ----- --- ---- --------
-------- --------------------- -
--- ---- - - -- - - ------------------- ---- -
-----------------------
-
-
-- ---- ------- ---- ------ --- --- - ----- ----- ---------
------------------------------------- -
-- ------ - --- ---- ------ --- --- -------
--- ---------- - --- ------------------------
-------- ------------
---
-- ---- --- ---- ------ -- --- ------
-----------------------------
-- --- - ----- ----- -------- -- --- -------
--------------------------- ---------- -
-- ----- --- --- ---- --------
----------------------
-- ---- --- --- ---- -------
-------------------- --------
-- --- --- --- ---- ------ -- --- ------- ----
----------------- - -----------
---
---在上面的代码中，我们首先创建了一个空数组 infoWindows，用于存储所有 InfoWindow 对象。然后，我们创建了一个变量 currentInfoWindow，用于记录当前打开的 InfoWindow。该 closeAllInfoWindows 函数遍历 infoWindows 数组，并关闭每个窗口。
接下来，我们通过使用 addListener 方法，将 click 事件添加到每个标记上。当用户单击标记时，我们执行以下操作：
- 调用
closeAllInfoWindows函数，关闭所有打开的 InfoWindow。 - 通过调用
open方法打开新的 InfoWindow。 - 将新的 InfoWindow 设置为当前窗口，以便在打开其他 InfoWindow 时可以关闭它。
总结
在本文中，我们讨论了如何通过编写代码来自动关闭 Google Maps API V3 中的所有已打开信息窗口。解决方案包括创建一个数组来存储所有 InfoWindow 对象，并使用 close 方法来关闭它们。我们还演示了如何在打开新的 InfoWindow 之前关闭当前打开的 InfoWindow，并将新的 InfoWindow 设置为当前打开的窗口。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29879