我如何让信息窗口停留在鼠标上的标记在谷歌地图

How do i let the infowindow stay on mouseout of the marker in google maps?

本文关键字：谷歌地图 鼠标 停留在 信息 窗口 信息窗      更新时间：2023-09-26

我需要信息窗口出现在鼠标上的标记。我想关闭信息窗口时，鼠标是任何地方除了信息窗口本身。我需要这个，因为，我有一个超链接在信息窗口和用户应该能够点击超链接。现在我有下面的代码:

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

这不起作用，因为当我从标记上移开焦点时，信息窗口就会关闭。

请告诉我。由于

你的问题有三个部分:

  1. 设置标记的mouseover事件处理程序的超时时间，以便InfoWindow不会消失，直到您将鼠标移动到它上面。

  2. 当鼠标出现在InfoWindow上时清除超时:

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

  3. 在InfoWindow内容的父的父上设置mouseleave事件。我知道它很脏，而且依赖于谷歌地图实现InfoWindow的方式，但这是你现在所能做的。

    请注意，您应该在InfoWindow附加到dom之后执行此操作!您可以通过听InfoWindow的domready事件来等待:

    infowindow.addListener('domready', () => {
    infowindowelement.parent().parent().parent().mouseleave(() => infowindow.close(map, marker));
});

    注意你应该使用元素来初始化你的InfoWindow的内容(这里我使用变量infoWindowElement )

这当然不是完美的，但是看看这个:

<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>
相关文章：