Question

我需要将信息窗口显示在鼠标悬停在标记上。我想在鼠标位于信息窗口本身以外的任何地方时关闭信息窗口。我需要这个，因为我在信息窗口上有一个超链接，用户应该可以点击超链接。现在我有以下代码：

marker.addListener('mouseover', function() {
    infowindow.open(map, marker);
  }, false);

  marker.addListener('mouseout', function() {
    infowindow.close(map, marker);
  }, false);

这不起作用，因为我从标记中移除了焦点，infowindow熄灭了。

请告诉我。感谢

Answer 1

您的问题分为三个部分：

为标记的mouseover事件的处理程序设置超时，以便InfoWindow在您将鼠标移到其上之前不会消失。

如果鼠标出现在InfoWindow上，则清除该超时：

var closeInfoWindowWithTimeout;
marker.addListener('mouseout', function() {
    closeInfoWindowWithTimeout = setTimeout(() => infowindow.close(map, marker), 1000);
}, false);        
infoWindowElement.mouseover(() => clearTimeout(closeMarkerInfoWithTimeout));

在{strong>您mouseleave内容的父级之父的父级设置InfoWindow事件。我知道它很脏并且依赖于谷歌地图如何实现InfoWindow，但现在你可以做的就是它。

小心你应该在InfoWindow附加到你的dom之后这样做！您可以通过收听InfoWindow的domready事件来等待它：
```
infowindow.addListener('domready', () => {
    infowindowelement.parent().parent().parent().mouseleave(() => infowindow.close(map, marker));
});
```
注意您应该使用元素来初始化InfoWindow的内容（此处我使用变量infoWindowElement ）。

Answer 2

这肯定不完美，但看看这个：

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var markers = [];  // store the marker objects here
var infoWindow;
var locations = [
  [50,    4],
  [50.5,  4.5],
  [51,    5],
  [51.5,  5.5]
]
var contentStrings = [
  'Hello',
  'World',
  'Foo',
  'Bar'
];
var mouseIn = false;

function initialize() {
  var mapObject = {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 8,
    center: new google.maps.LatLng(locations[1][0], locations[1][1]) 
  };
  map = new google.maps.Map(document.getElementById("googleMap"), mapObject);
  // make 1 infowindow.  We will use it again and again
  infoWindow = new google.maps.InfoWindow({
    content: ''
  });
  loadMarkers();
}
google.maps.event.addDomListener(window, 'load', initialize);

function loadMarkers() {
  for (var i=0; i<locations.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][0], locations[i][1]),
      map: map  // replaces  marker.setMap(map);
    });
    markers.push(marker);  // store the marker in the array
    google.maps.event.addListener(marker, 'mouseover', function () {
      // first we want to know which marker the client clicked on.
      var i=markers.indexOf(this);
      // we set the content of infoWindow, then we open it.
      infoWindow.setContent('<div onmouseout="mouseOutsideInfowindow()" onmouseover="mouseinsideInfowindow()">' + contentStrings[i] + '</div>')
      infoWindow.open(map, markers[i]);
      mouseIn = false;
    });
  }
}
function mouseinsideInfowindow() {
   mouseIn = true;
}
function mouseOutsideInfowindow() {
  if(mouseIn) {
    infoWindow.close();
    mouseIn = false;
  }
}
</script>
<style>
#googleMap {
  height: 400px;
}
</style>
<div id="googleMap"></div>

如何让infowindow留在谷歌地图标记的鼠标上？

2 个答案: