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

Question

我一直在添加带有标记和信息窗口的google map。 我做了以下代码：

<!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>

如您所见，我仅使用了一个infowindow变量。 但是，当一个信息窗口打开并且我们单击其他标记时，先前的信息窗口不会隐藏。 新旧信息窗口都会显示。

Google API的官方页面显示：

为了获得最佳的用户体验，任何时候都只能在地图上打开一个信息窗口。 多个信息窗口使地图显得混乱。 如果一次只需要一个信息窗口，则可以只创建一个InfoWindow对象，并在地图事件（例如用户单击）时在其他位置或标记处打开它。 如果确实需要多个信息窗口，则可以同时显示多个InfoWindow对象。

这正是我在做的。 我只有一个infowindow变量。 所以，

当新的infowindow显示在我的代码中时，为什么其他infowindows没有隐藏？

从答案看来，每次for循环运行时，它都会创建新的infowindow对象，而不覆盖前一个对象。 我以为当第二次循环运行时，第一个信息窗口对象被覆盖

如何有多个同名的infowindow对象？

Answer 1

Google API使用infowindow类在给定标记或LatLong上覆盖一些内容。 在您的示例中， setwindow函数负责将infowindow对象与Map UI关联并设置内容。

通过循环此操作，现在在Map上绘制的JavaScript对象现在已与之关联，并且如果重新初始化infowindow对象（不是Map绘制的引用），它将在Map上重新绘制。 （功能范围）

相反，您应该使用空内容创建infowindow对象：

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

在setwindow函数中，您应该只设置内容：

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

Google API的官方页面明确将其声明为“最佳做法”： 任何时候都只能在地图上打开一个信息窗口

Answer 2

因为您正在为每个标记构建信息窗口。 您应该执行以下操作：

 ...
    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