javascript - Google Maps Mouseout 仅适用于最后一个信息窗口

Question

.你好，我有一个随机问题，我还没有弄清楚。我有一张带有标记的 map ，当您将鼠标悬停在它们上方时，这些标记会显示信息窗口，当您将鼠标移开时，这些标记应该会关闭。出于某种原因，第二部分(在鼠标移出时关闭信息窗口)仅应用于最后一个标记。

如果有人能向我解释哪里出了问题以及如何修复我的代码，以便在用户将鼠标移离标记时所有信息窗口都将关闭，我们将不胜感激!谢谢!

这是我的 setMarkers 片段

function setMarkers(map, locations) {

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

        var myLatLng = new google.maps.LatLng(item[1], item[2]);

        var address1 = item[5];

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
        });

        var content = address;

        var infowindow = new google.maps.InfoWindow()

        google.maps.event.addListener(marker, 'mouseover', (function (marker, content, infowindow) {
            return function () {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            };
        })(marker, content, infowindow));

        google.maps.event.addListener(marker, 'mouseout', function () {
            infowindow.close();
        });
    }

}

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

Answer 1

您没有获得 mouseout 处理程序的函数闭包，但您获得的是 mouseover 处理程序的函数闭包。要解决此问题，请更改:

function setMarkers(map, locations) {

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

        var myLatLng    = new google.maps.LatLng(item[1], item[2]);

        var address1    = item[5];

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
        });

        var content = address;

       var infowindow = new google.maps.InfoWindow()

      google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 
        return function() {
           infowindow.setContent(content);
           infowindow.open(map,marker);
        };
    })(marker,content,infowindow)); 

       google.maps.event.addListener(marker, 'mouseout', function(){
          infowindow.close();
       });
      }

    }  

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

收件人:

function setMarkers(map, locations) {

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

        var myLatLng    = new google.maps.LatLng(item[1], item[2]);

        var address    = item[5];

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
        });

        var content = address;

       var infowindow = new google.maps.InfoWindow()

      google.maps.event.addListener(marker,'mouseover', (function(marker,content,infowindow){ 
        return function() {
           infowindow.setContent(content);
           infowindow.open(map,marker);
        };
    })(marker,content,infowindow)); 
      google.maps.event.addListener(marker, 'mouseout', (function(marker,content,infowindow){ 
        return function() {
           infowindow.close();
        };
    })(marker,content,infowindow)); 

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

working fiddle

工作代码片段:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  setMarkers(map, locations);


}
google.maps.event.addDomListener(window, "load", initialize);
var locations = [
  ['Bondi Beach', -33.890542, 151.274856, , , 'Bondi Beach', 4],
  ['Coogee Beach', -33.923036, 151.259052, , , 'Coogee Beach', 5],
  ['Cronulla Beach', -34.028249, 151.157507, , , 'Cronulla Beach', 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, , , 'Manly Beach', 2],
  ['Maroubra Beach', -33.950198, 151.259302, , , 'Maroubra Beach', 1]
];

function setMarkers(map, locations) {
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var item = locations[i];

    var myLatLng = new google.maps.LatLng(item[1], item[2]);
    bounds.extend(myLatLng);
    var address = item[5];

    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
    });

    var content = address;

    var infowindow = new google.maps.InfoWindow()

    google.maps.event.addListener(marker, 'mouseover', (function(marker, content, infowindow) {
      return function() {
        infowindow.setContent(content);
        infowindow.open(map, marker);
      };
    })(marker, content, infowindow));
    google.maps.event.addListener(marker, 'mouseout', (function(marker, content, infowindow) {
      return function() {
        infowindow.close();
      };
    })(marker, content, infowindow));

  }
  map.fitBounds(bounds);
}

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>