Question

我一直在添加带有标记和infowindows的谷歌地图。我做了以下代码：

<!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变量。但是当一个infowindow打开并且我们点击其他标记时，前一个infowindow不会隐藏。新老信息都出现了。

Google API的official page说：

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

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

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

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

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

Answer 1

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

通过循环此操作，一旦在Map上绘制的JavaScript对象现在与它相关联，并且如果重新初始化infowindow对象（而不是Map绘制的引用），它将在Map上重绘。（Function Scoping）

相反，您应该使用空内容创建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);
    }
 ...

当我的代码中出现新的infowindo时，为什么其他infowindows不隐藏？

2 个答案: