Google Maps Mouseout仅适用于最后一个infowindow [英] Google Maps Mouseout only applied to last infowindow

查看：131
本文介绍了Google Maps Mouseout仅适用于最后一个infowindow的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好，我有一个我无法弄清楚的随机问题。我有一张地图，上面有标记，当你将鼠标悬停在它们上面时，它们会显示infowindows，当你将鼠标移开时它们应该会关闭。出于某种原因，第二部分（关闭mouseout上的infowindow）仅适用于最后一个标记。



如果有人能向我解释我要出错的地方，修复我的代码，以便在用户将鼠标从标记移开时所有的infowindows都会关闭，这将不胜感激！

这是我的setMarkers片段

  function setMarkers（map ，位置）{
 
（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; 
 $ b $ 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 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; 
 $ b $ 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 ，信息窗口））; 
 
 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; 
 $ b $ 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 ，信息窗口））; 
 google.maps.event.addListener（marker，'mouseout'，（function（marker，content，infowindow））{
 return function（）{
 infowindow.close（）; 
}; 
}）（marker，content，infowindow））; 
 
 
 $ b google.maps.event.addDomListener（window，'load'，initialize）;

工作小提琴



工作程式码片段：
$ b 

  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]];函数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;宽度：500px; margin：0px; < script src =https：//


.Hello I have a random problem I haven't been able to figure out. I have a map with markers that show infowindows when you hover over them which are supposed to close when you move your mouse away. For some reason the second part (closing the infowindow on mouseout) only gets applied to the last marker.

If anyone could explain to me where I'm going wrong and how to fix my code so that all of the infowindows will close when the user moves their mouse away from the marker it'd be greatly appreciated! Thanks!

Here is my setMarkers snippet

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

解决方案

You aren't getting function closure for the mouseout handler, but you are for the mouseover handler. To fix the issue, change:

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

To:

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

Working code snippet:

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>

这篇关于Google Maps Mouseout仅适用于最后一个infowindow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆