当新的信息窗口显示在我的代码中时，为什么其他信息窗口没有隐藏？

Question

I've been adding google map with markers and infowindows. 我一直在添加带有标记和信息窗口的google map。 I made the following code: 我做了以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Info windows</title>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #map {
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>

      // This example displays a marker at the center of Australia.
      // When the user clicks the marker, an info window opens.

      function initMap() {
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: uluru
        });

        var contentString = [];
        contentString[0] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
        '<div id="bodyContent">'+
        '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';

        contentString[1] = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">New York</h1>'+
        '<div id="bodyContent">'+
        '<p><b>New York</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
        'sandstone rock formation in the southern part of the '+
        'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
        'south west of the nearest large town, Alice Springs; 450&#160;km '+
        '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
        'features of the Uluru - Kata Tjuta National Park. Uluru is '+
        'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
        'Aboriginal people of the area. It has many springs, waterholes, '+
        'rock caves and ancient paintings. Uluru is listed as a World '+
        'Heritage Site.</p>'+
        '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
        'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+
        '(last visited June 22, 2009).</p>'+
        '</div>'+
        '</div>';



        var markers = [];

        markers[0] = new google.maps.Marker({
          position: uluru,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });
        markers[1] = new google.maps.Marker({
          position: {lat: -20.363, lng: 120.044},
          map: map,
          title: 'New York'
        });
        function setwindow(i) {
          var infowindow = new google.maps.InfoWindow({
            content: contentString[i],
            maxWidth: 200
          });
          markers[i].addListener('click', function() {          
            infowindow.open(markers[i].get('map'), this);
          });
        }

        for (var i = markers.length - 1; i >= 0; i--) {
         setwindow(i);
        }








      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBga3chd-auBMGLGITc3rjact16mozcI4Q&callback=initMap">
  </script>
</body>
</html>

As you can see I have used only one infowindow variable. 如您所见，我仅使用了一个infowindow变量。 But when one infowindow is open and we click on other marker the previous infowindow doesn't hide. 但是，当一个信息窗口打开并且我们单击其他标记时，先前的信息窗口不会隐藏。 Both the new and old infowindow show up. 新旧信息窗口都会显示。

Google API's official page says: Google API的官方页面显示：

For the best user experience, only one info window should be open on the map at any one time. 为了获得最佳的用户体验，任何时候都只能在地图上打开一个信息窗口。 Multiple info windows make the map appear cluttered. 多个信息窗口使地图显得混乱。 If you only need one info window at a time, you can create just one InfoWindow object and open it at different locations or markers upon map events, such as user clicks. 如果一次只需要一个信息窗口，则可以只创建一个InfoWindow对象，并在地图事件（例如用户单击）时在其他位置或标记处打开它。 If you do need more than one info window, you can display multiple InfoWindow objects at the same time. 如果确实需要多个信息窗口，则可以同时显示多个InfoWindow对象。

This is exactly what I am doing. 这正是我在做的。 I have only one infowindow variable. 我只有一个infowindow变量。 So, 所以，

Why don't other infowindows hide when a new infowindow shows up in my code? 当新的infowindow显示在我的代码中时，为什么其他infowindows没有隐藏？

From the answers it seems that each time the for loop runs it creates new infowindow objects without overriding the previous one. 从答案看来，每次for循环运行时，它都会创建新的infowindow对象，而不覆盖前一个对象。 I thought when the loop runs for the second time the first infowindow object is just overridden 我以为当第二次循环运行时，第一个信息窗口对象被覆盖

How can there be more than one infowindow objects with the same name? 如何有多个同名的infowindow对象？

Answer 1

Google API using infowindow Class to overlay some content on given marker or LatLong. Google API使用infowindow类在给定标记或LatLong上覆盖一些内容。 In you example, setwindow function is responsible for associating infowindow object with Map UI and setting up content. 在您的示例中， setwindow函数负责将infowindow对象与Map UI关联并设置内容。

By looping this operation, JavaScript object once drawn on Map is now associated with it and if you re-initializing infowindow object(not Map drawn reference), it will be redrawn on Map. 通过循环此操作，现在在Map上绘制的JavaScript对象现在已与之关联，并且如果重新初始化infowindow对象（不是Map绘制的引用），它将在Map上重新绘制。 ( Function Scoping ) （功能范围）

Instead, you should create infowindow object with empty content: 相反，您应该使用空内容创建infowindow对象：

var markers = [];
var infowindow = new google.maps.InfoWindow({
     content: "",
     maxWidth: 200
});

And in setwindow function, you should set content only: 在setwindow函数中，您应该只设置内容：

function setwindow(i) {
      markers[i].addListener('click', function() { 
         infowindow.setContent(contentString[i]); 
         infowindow.open(markers[i].get('map'), this);
      });
    }

Google API's official page clearly states it as Best practices: only one info window should be open on the map at any one time Google API的官方页面明确将其声明为“最佳做法”： 任何时候都只能在地图上打开一个信息窗口

Answer 2

Because you are constructing infowindows for each markers. 因为您正在为每个标记构建信息窗口。 You should do something like this: 您应该执行以下操作：

 ...
    var markers = [];

    markers[0] = new google.maps.Marker({
      position: uluru,
      map: map,
      title: 'Uluru (Ayers Rock)'
    });
    markers[1] = new google.maps.Marker({
      position: {lat: -20.363, lng: 120.044},
      map: map,
      title: 'New York'
    });

    var infowindow = new google.maps.InfoWindow({maxWidth: 200});
    function setwindow(i) {
      markers[i].addListener('click', function() {          
        infowindow.setContent(contentString[i]);
        infowindow.open(markers[i].get('map'), this);
      });
    }

    for (var i = markers.length - 1; i >= 0; i--) {
     setwindow(i);
    }
 ...

当新的信息窗口显示在我的代码中时，为什么其他信息窗口没有隐藏？

问题描述

2 个解决方案

解决方案1
1 2016-06-21 07:55:40

解决方案2
1 2016-06-21 07:55:47

当新的信息窗口显示在我的代码中时，为什么其他信息窗口没有隐藏？

问题描述

2 个解决方案

解决方案1 1 2016-06-21 07:55:40

解决方案2 1 2016-06-21 07:55:47

解决方案1
1 2016-06-21 07:55:40

解决方案2
1 2016-06-21 07:55:47