使用InfoBox插件的Google Maps API v3事件鼠標懸停

Question

我正在使用谷歌地圖API的v3並使用InfoBox插件（ http://google-maps-utility-library-v3.googlecode.com/套件的一部分）來制作一些設計精美的信息窗口對標記物相互作用有反應。

對於這個特定的實驗，我試圖在標記被盤旋出來時彈出InfoBox窗口，但是我很難在InfoBox窗口上解決有關鼠標懸停/鼠標移動的事件系統的問題。 發生的事情是我可以找到DIV並使用google.maps.event.addDomListener將mouseover和mouseout事件附加到InfoBox，除非它過於繁瑣 - 當我將鼠標移到InfoBox中的子節點時，它被視為一個在父節點上使用mouseout並觸發事件。

這在某種程度上與傳播有關嗎？ 我知道InfoBox在創建一個新的InfoBox時有一個enableEventPropagation開關，但是我不太確定它將如何以及為什么會被使用。

該實驗的目的是創建一個信息窗口，其中包含鼠標懸停在標記上方的相關鏈接。 然后，您可以在信息窗口內移動鼠標並進行交互，當您將鼠標移出時，它將關閉信息窗口。 我嘗試了另一種方法，鼠標懸停在標記上會觸發一個外部函數，該函數創建一個外部信息窗口元素，該元素已定位並具有自己的事件處理。 這樣可以正常工作，但是在地圖頂部自定義信息窗口的分層意味着當您將鼠標懸停在另一個標記上時（在自定義信息窗口下），它無法為鼠標注冊鼠標懸停。

這是我對InfoBox方法的嘗試：

 <!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>

所以我想如果有人知道如何使這項工作和正確回應（或提供相關的提示/技巧）那么這將是偉大的！

Answer 1

我曾經也有過一樣的問題。 正如您所說的那樣，問題是當移動到其中一個子元素時會觸發mouseout。 解決方案是使用mouseenter和mouseleave（需要jQuery），有關更多信息，請參閱此帖子：懸停，鼠標懸停和鼠標移出

在這種情況下，無法使用谷歌地圖事件監聽器（它不支持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();
        }
    );
});

Answer 2

會發生什么事情是我可以找到DIV並使用google.maps.event.addDomListener將mouseover和mouseout事件附加到InfoBox，除非它過於繁瑣 - 當我將鼠標移到InfoBox中的子節點時，它被視為一個在父節點上使用mouseout並觸發事件。

克服這種情況的一種天真的方法是在mouseout處理程序中遍歷元素樹，並檢查是否找到DIV或最終到達文檔根目錄。 如果找到DIV，鼠標仍在彈出窗口內，您無需關閉它。

jQuery通過引入第二個事件mouseleave很好地解決了這個問題，該事件的行為與您期望的一樣，並且以與上述類似的方式實現。 對於這種情況， jQuery源代碼在內容中有一個特殊的閉withinElement ，這可能值得一看。

使用InfoBox插件的Google Maps API v3事件鼠標懸停

問題描述

2 個解決方案

解決方案1
11 已采納 2011-05-12 19:52:15

解決方案2
2 2011-05-11 23:16:32

使用InfoBox插件的Google Maps API v3事件鼠標懸停

問題描述

2 個解決方案

解決方案1 11 已采納 2011-05-12 19:52:15

解決方案2 2 2011-05-11 23:16:32

解決方案1
11 已采納 2011-05-12 19:52:15

解決方案2
2 2011-05-11 23:16:32