當新的信息窗口顯示在我的代碼中時，為什么其他信息窗口沒有隱藏？

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