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

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({

SO 这里有类似 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 。