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

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，因此与在Google Maps API v3中只打开一个InfoWindow和Google Maps infoWindow仅在标记上加载最后一条记录不同

以下是完整的代码：

    <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变量指向创建的第二个infowindow，因为您对两个infowindow使用相同的变量：

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

SO这里有这样的问题，这个和这个讨论同一个问题。乍一看可能不是同一个问题，但你的问题是范围。

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

       <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);
});

与函数的范围相关，因此将始终指向正确的信息窗口实例。我建议您阅读更多关于javascript作用域的内容来理解这个问题，在我链接到一些关于这个问题的好文章的问题答案中有一些链接（例如这篇或这篇）。