Google 地图：自动关闭打开的 InfoWindows

Google

自然语言生成的文章：

在 Google 地图应用中，InfoWindows 是一个弹出窗口，用于显示特定地点的详细信息。当用户点击地图上的标记时，InfoWindows 会打开并显示相关信息。然而，有时候我们希望在用户点击地图上其他标记时自动关闭当前打开的 InfoWindows，以提供更好的用户体验。

自动关闭打开的 InfoWindows

在使用 Google 地图的应用中，我们可以通过编程的方式实现自动关闭打开的 InfoWindows。具体方法是在每次用户点击地图上的标记时，检查当前是否有已打开的 InfoWindows，如果有，则关闭它，然后再打开新的 InfoWindows。

以下是一个示例代码，展示了如何使用 JavaScript 在 Google 地图上实现自动关闭打开的 InfoWindows：

html
<!DOCTYPE html>
<html>
<head>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    var map;
    var infoWindows = [];
    
    function initMap() {
      map = new Google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.7749, lng: -122.4194},
        zoom: 13
      });
      
      // 创建标记
      var marker1 = new Google.maps.Marker({
        position: {lat: 37.7749, lng: -122.4194},
        map: map,
        title: 'San Francisco'
      });
      
      var marker2 = new Google.maps.Marker({
        position: {lat: 37.8716, lng: -122.2727},
        map: map,
        title: 'Berkeley'
      });
      
      // 创建 InfoWindows
      var infoWindow1 = new Google.maps.InfoWindow({
        content: 'Welcome to San Francisco!'
      });
      
      var infoWindow2 = new Google.maps.InfoWindow({
        content: 'Welcome to Berkeley!'
      });
      
      // 将 InfoWindows 添加到数组中
      infoWindows.push(infoWindow1);
      infoWindows.push(infoWindow2);
      
      // 绑定标记点击事件
      marker1.addListener('click', function() {
        closeInfoWindows();
        infoWindow1.open(map, marker1);
      });
      
      marker2.addListener('click', function() {
        closeInfoWindows();
        infoWindow2.open(map, marker2);
      });
    }
    
    // 关闭所有打开的 InfoWindows
    function closeInfoWindows() {
      for (var i = 0; i < infoWindows.length; i++) {</p>        infoWindows[i].close();
      }
    }
  </script>
  <script src="https://maps.Googleapis.com/maps/api/JS?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>

示例代码解析

上述代码实现了在 Google 地图上自动关闭打开的 InfoWindows。首先，在地图上创建了两个标记(marker1和marker2)，并为它们分别创建了对应的 InfoWindows(infoWindow1和infoWindow2)。

然后，将这些 InfoWindows 添加到一个数组(infoWindows)中，以便在需要关闭它们时进行遍历。

接下来，为每个标记绑定了点击事件，当用户点击标记时，会先调用 closeInfoWindows() 函数关闭当前打开的 InfoWindows，然后再打开对应的 InfoWindow。

closeInfoWindows() 函数会遍历 infoWindows 数组，对每个 InfoWindow 调用 close() 方法进行关闭。

通过这种方式，我们可以在用户点击地图上的不同标记时自动关闭当前打开的 InfoWindows，确保只有一个 InfoWindow 是打开的。

：

使用 Google 地图的 InfoWindows 可以方便地显示地点的详细信息。通过编程实现自动关闭打开的 InfoWindows，可以提供更好的用户体验。以上示例代码展示了如何使用 JavaScript 在 Google 地图上实现自动关闭打开的 InfoWindows，并且在用户点击地图上的标记时进行切换。通过这种方式，我们可以确保在任何时候只有一个 InfoWindow 是打开的，以便用户能够更清楚地了解地点的信息。