如何讓信息窗口停留在Google地圖中標記的鼠標移出位置？

Question

我需要將信息窗口顯示在鼠標懸停在標記上的位置。我想在鼠標不在信息窗口本身之外的任何位置時關閉信息窗口。 我需要這樣做是因為，我在信息窗口上有一個超鏈接，並且用戶應該能夠單擊該超鏈接。 現在我有以下代碼：

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

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

這是行不通的，因為在我從信息窗口中關閉標記的那一刻起，信息窗口就熄滅了。

請告訴我。 謝謝

Answer 1

您的問題分為三個部分：

1. 設置標記的mouseover事件處理程序的超時，以使InfoWindow在您將鼠標移到它之前不會消失。

2. 如果鼠標進入信息窗口，則清除該超時：

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

3. 在InfoWindow內容的父級的父級上設置mouseleave事件。 我知道它很臟，並且取決於Google Maps如何實現InfoWindow，但這是您現在所能做的。

   請注意，在將InfoWindow附加到您的dom之后，應該執行此操作！ 您可以通過偵聽InfoWindow的domready事件來等待它：

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

   請注意 ，您應該使用Element來初始化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>