谷歌地圖API V3鼠標懸停事件與信息框插件

我與谷歌地圖API的V3擺弄周圍，使用結合信息框插件（在http://google-maps-utility-library-v3.googlecode.com/套件的一部分），使一些很好的風格信息窗口，爲標誌的互動反應。谷歌地圖API V3鼠標懸停事件與信息框插件

對於這個特定的實驗，我試圖讓信息框窗口彈出時，標記已被懸停，但我一直在努力解決問題與事件系統有關mouseover/mouseout on InfoBox窗口。會發生什麼事是我能找到的DIV和使用google.maps.event.addDomListener到鼠標懸停和鼠標移開事件附加到信息框，但它太繁瑣 - 當我將鼠標放置信息框內的子節點，則會將其視爲父節點上的鼠標移出，並引發事件。

是這個主題相關的傳播？我知道InfoBox在創建新的InfoBox時有一個enableEventPropagation開關，但我不確定如何以及爲何使用它。

該實驗的目的是內部的上標記的鼠標懸停出現創建相關鏈接的信息窗口。然後，您可以在信息窗口中移動鼠標並進行交互，當您將鼠標移出時，它將關閉信息窗口。我已經嘗試了另一種方法，其中標記上的mouseover觸發外部函數，該函數創建一個定位的外部信息窗口元素並具有其自己的事件處理。這很好，但是在地圖頂部的自定義信息窗口的分層意味着當你將鼠標放在靠近另一個標記（在自定義信息窗口下）時，它不能爲該標記註冊鼠標懸停。

這是我在信息框方法嘗試：

<!DOCTYPE html> 
<html> 
<head> 
<style type="text/css"> 
<!-- 
    #map { 
     width:     800px; 
     height:     600px; 
     margin:     50px auto; 
    } 

    .map-popup { 
     overflow:    visible; 
     display:    block; 
    } 

    .map-popup .map-popup-window { 
     background:    #fff; 
     width:     300px; 
     height:     140px; 
     position:    absolute; 
     left:     -150px; 
     bottom:     20px; 
    } 

    .map-popup .map-popup-content { 
     padding:    20px; 
     text-align:    center; 
     color:     #000; 
     font-family:   'Georgia', 'Times New Roman', serif; 
    } 
--> 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script> 
<script type="text/javascript"> 

    var gmap, gpoints = []; 

    function initialize() { 
     gmap = new google.maps.Map(document.getElementById('map'), { 
      zoom:    9, 
      streetViewControl: false, 
      scaleControl:  false, 
      center:    new google.maps.LatLng(-38.3000000,144.9629796), 
      mapTypeId:   google.maps.MapTypeId.ROADMAP 
     }); 

     for (var i=0; i<5; i++) { 
      gpoints.push(new point(gmap)); 
     } 
    } 

    function popup(_point) { 
     _point.popup = new InfoBox({ 
      content:   _point.content, 
      pane:    'floatPane', 
      closeBoxURL:  '', 
      alignBottom:  1 
     }); 

     _point.popup.open(_point.marker.map, _point.marker); 

     google.maps.event.addListener(_point.popup, 'domready', function() { 
      // Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened) 
      google.maps.event.addDomListener(_point.popup.div_, 'mouseout', function() { 
       _point.popup.close(); 
      }); 
     }); 
    } 

    function point(_map) { 
     this.marker = new google.maps.Marker({ 
      position:   new google.maps.LatLng(-37.8131869 - (1 * Math.random()),144.9629796 + (1 * Math.random())), 
      map:    _map 
     }); 

     this.content = '<div class="map-popup"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">Just try to click me!</a><br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>'; 

     // Scope 
     var gpoint = this; 

     // Events 
     google.maps.event.addListener(gpoint.marker, 'mouseover', function() { 
      popup(gpoint); 
     }); 
    } 

</script> 
</head> 
<body onload="initialize()"> 
    <div id="map"></div> 
</body> 
</html>

所以我想，如果有人知道如何使這項工作，並作出適當的反應（或提供相關的提示/技巧），那麼這將是偉大的！

來源

2011-03-25 Matt Scheurich

你有沒有找到一個好的解決方案呢？下面的jQuery示例看起來像是針對彈出框本身而不是標記。我無法看到如何使用InfoBox以這種方式實現它。通過升級到InfoBox的最新開發版本並開啓事件傳播，我能夠讓彈出窗口不跳轉到彈出窗口下的任何底層標記。 – 2012-01-05 14:33:21

我有同樣的問題。就像你說的那樣，問題在於當移動到其中一個子元素時觸發了鼠標移出。解決方法是改爲使用mouseenter和mouseleave（需要jQuery），請參閱此帖以獲取更多信息：Hover, mouseover and mouse out

在這種情況下，不能使用Google地圖事件偵聽器（它不支持mouseenter）。相反，你可以附加一個正常的jQuery事件，或使用懸停功能，如下面的代碼所示：

google.maps.event.addListener(_point.popup, 'domready', function() { 
//Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened) 

    $(_point.popup.div_).hover(
     function() { 
      //This is called when the mouse enters the element 
     }, 
     function() { 
      //This is called when the mouse leaves the element 
      _point.popup.close(); 
     } 
    ); 
});

來源

2011-05-12 19:52:15 anyman

感謝這幫了我很多！ – 2012-02-27 12:11:57

在懸停函數中，我設置了一個變量來指示彈出窗口是否打開。然後，在標記的「鼠標懸停」回調中，如果信息框尚未打開，則只顯示信息框。最後，我添加了一個'clickclose'事件來重置指示popup關閉的變量。信息框最終在覆蓋標記時正常工作。 – yitwail 2012-09-03 19:23:54

最近使用jquery的方法：'google.maps.event.addListener（_point，'domready'，function（）{$（_ point.div _）。mouseover（function（e）{...' – user151496 2015-03-05 09:46:49

會發生什麼事是我能找到的DIV和使用google.maps.event.addDomListener到鼠標懸停和鼠標移開事件附加到信息框，但它太繁瑣 - 當我將鼠標放置內的一個子節點InfoBox在父節點上計算爲鼠標移動並觸發事件。

天真的方法來克服，這可能是橫貫元件樹在你mouseout處理程序，並檢查是否找到DIV或文檔根目錄的最後。如果您發現DIV，鼠標仍在彈出窗口內，您無需關閉它。

jQuery通過引入第二個事件mouseleave很好地解決了這個問題，該事件的行爲與您期望的相同，並且以與上述相似的方式實現。 jQuery sourcecode有一個特別的關閉withinElement這個案件可能值得一看。

來源

2011-05-11 23:16:32 digitalbreed

谷歌地圖API V3鼠標懸停事件與信息框插件

回答

相關問題