当点击另一个标记时，Google地图关闭先前的信息窗口

Question

考虑以下位置：

 var locations =
        [{ "id": 1, "ReferenceNumber": "52525252525", "Address" : "School" , "Latitude": "21.585486", "Longitude": "50.258745" },
         { "id": 2, "ReferenceNumber": "6262626262", "Address" : "University", "Latitude": "21.54484411", "Longitude": "50.14846648" },
         { "id": 3, "ReferenceNumber": "424242424", "Address": "PUMPING STATION ", "Latitude": "21.9856341", "Longitude": "61.2587466" }];

以下代码可以让您点击多个标记时打开多个信息窗口。如何防止这种情况发生，并确保在打开新窗口之前关闭先前的窗口？

$.each(locations, function(i, item) {

    var marker = new google.maps.Marker({
        'position': new google.maps.LatLng(item.Latitude, item.Longitude),
        'map': map,
        'title': item.Latitude + "," + item.Longitude
    });

    marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png')

    var infowindow = new google.maps.InfoWindow({
        content: "<div class='infoDiv'><h3>Reference#: </h3> <h6>" + item.ReferenceNumber + "<h3>Location: </h3> <h6>" + item.Address + "</div></div>"
    });

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

    google.maps.event.addListener(map, "click", function(event) {
        infowindow.close();
        //autoCenter();
    });
})

任何帮助都将不胜感激。

- Moeez

---

当您提出问题时，请提供一个最小、完整和可验证的示例，以便他人能够重现该问题。 - MrUpsidown

可能是关闭一个InfoWindow时关闭所有其他InfoWindows的重复问题。 - geocodezip

可能是重复的问题：在打开另一个InfoWindow之前关闭当前的InfoWindow。 - geocodezip

Answer 1

不要创建多个信息窗口，如果您只需要同时打开一个，则只需创建一个InfoWindow对象实例，并使用setContent（）方法根据单击的标记设置其内容。您还需要在标记点击侦听器周围使用闭包。类似于这样：

google.maps.event.addListener(marker, 'click', (function(marker) {

  return function() {

    // Something here
  }

})(marker));

更多信息请参考此处：在事件监听器中使用闭包

以下是一个可工作的示例（使用jQuery）

function initialize() {

  var mapOptions = {
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng(1, 1)
  };

  var locations = [
    [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
    [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
    [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
    [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
    [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
    [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
  ];

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var infowindow = new google.maps.InfoWindow();

  $.each(locations, function(i, item) {

    var marker = new google.maps.Marker({
      position: item[0],
      map: map,
      title: item[1],
    });

    google.maps.event.addListener(marker, 'click', (function(marker) {

      return function() {
        infowindow.setContent(item[2]);
        infowindow.open(map, marker);
      }

    })(marker));
  });

}

google.maps.event.addDomListener(window, 'load', initialize);

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

以下是Vanilla Javascript实现同样解决方案的代码(无jQuery)

function initialize() {

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: new google.maps.LatLng(1, 1)
    };

    var locations = [
        [new google.maps.LatLng(0, 0), 'Marker 1', 'Infowindow content for Marker 1'],
        [new google.maps.LatLng(0, 1), 'Marker 2', 'Infowindow content for Marker 2'],
        [new google.maps.LatLng(0, 2), 'Marker 3', 'Infowindow content for Marker 3'],
        [new google.maps.LatLng(1, 0), 'Marker 4', 'Infowindow content for Marker 4'],
        [new google.maps.LatLng(1, 1), 'Marker 5', 'Infowindow content for Marker 5'],
        [new google.maps.LatLng(1, 2), 'Marker 6', 'Infowindow content for Marker 6']
    ];

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var infowindow = new google.maps.InfoWindow();

    for (var i = 0; i < locations.length; i++) {

        var marker = new google.maps.Marker({
            position: locations[i][0],
            map: map,
            title: locations[i][1]
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {

            return function () {
                infowindow.setContent(locations[i][2]);
                infowindow.open(map, marker);
            }

        })(marker, i));
    }
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

- MrUpsidown