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

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。

谷歌地图上的多个不同的infoWindows

1 个答案: