我如何讓infowindow留在谷歌地圖上的標記鼠標？

Question

我需要信息窗口出現在鼠標懸停在marker上。我想關閉信息窗口，當鼠標在信息窗口本身以外的任何地方。我需要這個，因爲我在信息窗口上有一個超鏈接，用戶應該可以點擊超鏈接。現在，我有下面的代碼：

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

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

這不起作用，因爲一刻起，我從標記刪除焦點的信息窗口熄滅。

請讓我知道。 感謝

Answer 1

您可以使用下面的代碼，

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

更多信息 - https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple

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> 

Answer 3

您的問題三部分：

1. 設置標記的mouseover事件處理程序的超時時間，以便InfoWindow不會消失，直到您在其上移動鼠標爲止。

2. 在清除超時如果鼠標附帶的信息窗口：

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

3. 上設置mouseleave事件您InfoWindow的內容的父的父母的父母。我知道它很骯髒，並且依賴於Google地圖如何實現InfoWindow，但這是您現在可以完成的一切。

   小心你應該在InfoWindow附加到你的dom後執行此操作！您可以通過聽domready事件信息窗口的等待它：

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

   注意，你應該使用一個元素來初始化您的信息窗口的內容（這裏我使用可變infoWindowElement）。