谷歌地图上有多个不同的信息窗口

Question

我想为谷歌地图上的每个标记创建一个自己的窗口。我试过这个：

// Create first marker and window
marker = new google.maps.Marker({
  position: myLatlng,
  map: map
});
contentString = '<div>BOX A</div>';
var infowindow = new google.maps.InfoWindow({
  content: contentString
});
marker.addListener('click', function() {
  infowindow.open(map, marker);
});

// Create second marker and window
myLatlng = new google.maps.LatLng(12.1364,-86.2514);
marker = new google.maps.Marker({
  position: myLatlng,
  map: map
});
contentString = '<div>BOX B</div>';
infowindow = new google.maps.InfoWindow({
  content: contentString
});
marker.addListener('click', function() {
  infowindow.open(map, marker);
});

不幸的是，只有第二个标记有一个包含Box B 的窗口。如果我单击第一个标记，则会弹出带有Box B 的第二个标记的窗口。我不明白为什么会这样。

我注意到，如果我为第二个标记和第二个窗口使用一个新变量，每个标记都有自己的窗口，如下所示：

              // Create sceond marker and window
              myLatlng = new google.maps.LatLng(12.1364,-86.2514);
              marker2 = new google.maps.Marker({
                position: myLatlng,
                map: map
              });
              contentString = '<div>BOX B</div>';
              infowindow2 = new google.maps.InfoWindow({
                content: contentString
              });
              marker2.addListener('click', function() {
                infowindow2.open(map, marker2);
              });

但我完全不明白为什么我需要使用新变量。为什么我不能覆盖旧变量？

---

注意：这个问题是关于如何获取多个不同的 infoWindows，因此不同于 Have just one InfoWindow open in Google Maps API v3 和 Google Maps infoWindow only loading last record on markers

---

完整代码如下：

    <div id="map" style='height:300px'></div>
           <script>
             function initMap() {

              // init map
              var mapDiv = document.getElementById('map');
              myLatlng = new google.maps.LatLng(52.4955,13.3437);
              var map = new google.maps.Map(mapDiv, {
                scrollwheel: false,
                center: myLatlng,
                zoom: 1
              });

              var myLatlng, marker, infowindow,contentString;

              // Create first marker and window
              marker = new google.maps.Marker({
                position: myLatlng,
                map: map
              });
              contentString = '<div>BOX A</div>';
              var infowindow = new google.maps.InfoWindow({
                content: contentString
              });
              marker.addListener('click', function() {
                infowindow.open(map, marker);
              });

              // Create second marker and window
              myLatlng = new google.maps.LatLng(12.1364,-86.2514);
              marker = new google.maps.Marker({
                position: myLatlng,
                map: map
              });
              contentString = '<div>BOX B</div>';
              infowindow = new google.maps.InfoWindow({
                content: contentString
              });
              marker.addListener('click', function() {
                infowindow.open(map, marker);
              });
             }
             </script>

Answer 1

在您的第一个标记单击处理程序时

marker.addListener('click', function() {
      infowindow.open(map, marker);
});

调用时，您的 infowindow 变量指向创建的第二个信息窗口，因为您对两个信息窗口使用相同的变量：

var infowindow = new google.maps.InfoWindow(..
infowindow = new google.maps.InfoWindow({

这里有一些问题，例如 this、this 和 this，它们讨论了相同的问题。乍一看可能不是同一个问题，但您的问题在于范围。

您的问题可以通过使用两个不同的变量轻松解决，或者更好地创建可重用函数：

       <script>

         function addMarkerWithInfowindow(map, marker_position, infowindow_content){
              var myLatlng, marker, infowindow,contentString;
              marker = new google.maps.Marker({
                  position: marker_position,
                  map: map
              });
              contentString = infowindow_content;
              infowindow = new google.maps.InfoWindow({
                  content: contentString
              });
              marker.addListener('click', function() {
                 infowindow.open(map, marker);
              });
         }

         function initMap() {

          // init map
          var mapDiv = document.getElementById('map');
          myLatlng = new google.maps.LatLng(52.4955,13.3437);
          var map = new google.maps.Map(mapDiv, {
            scrollwheel: false,
            center: myLatlng,
            zoom: 1
          });


          addMarkerWithInfowindow(map, new google.maps.LatLng(52.4955,13.3437), '<div>BOX A</div>');
          addMarkerWithInfowindow(map, new google.maps.LatLng(12.1364,-86.2514), '<div>BOX B</div>');

         }
         </script>

现在处理程序中的变量：

marker.addListener('click', function() {
    infowindow.open(map, marker);
});

与函数的范围相关联，因此将始终指向正确的infowindow 实例。我建议您阅读有关 javascript 范围的更多信息以了解该问题，我链接到一些关于该问题的好文章的问题的答案中有一些链接（例如 this one 或 this one。