使用InfoBox插件的Google Maps API v3事件鼠标悬停

Question

I'm mucking around with v3 of the Google Maps API and using the InfoBox plugin (part of the http://google-maps-utility-library-v3.googlecode.com/ suite) in conjunction to make some nicely styled info windows that react to marker interactions. 我正在使用谷歌地图API的v3并使用InfoBox插件（ http://google-maps-utility-library-v3.googlecode.com/套件的一部分）来制作一些设计精美的信息窗口对标记物相互作用有反应。

For this particular experiment, I've attempted to get the InfoBox window pop-up when the marker has been hovered over and out, however I've struggled to resolve the issue with the event system regarding mouseover/mouseout on the InfoBox window. 对于这个特定的实验，我试图在标记被盘旋出来时弹出InfoBox窗口，但是我很难在InfoBox窗口上解决有关鼠标悬停/鼠标移动的事件系统的问题。 What happens is that I can locate the DIV and use a google.maps.event.addDomListener to attach a mouseover and mouseout event to the InfoBox, except it's too fiddly -- when I mouseover a child node within the InfoBox, it counts as a mouseout on the parent node and fires the event. 发生的事情是我可以找到DIV并使用google.maps.event.addDomListener将mouseover和mouseout事件附加到InfoBox，除非它过于繁琐 - 当我将鼠标移到InfoBox中的子节点时，它被视为一个在父节点上使用mouseout并触发事件。

Is this somehow related to propagation? 这在某种程度上与传播有关吗？ I know InfoBox has a enableEventPropagation switch when you create a new InfoBox, but I'm not quite sure how and why it would be used. 我知道InfoBox在创建一个新的InfoBox时有一个enableEventPropagation开关，但是我不太确定它将如何以及为什么会被使用。

The aim of the experiment is to create an info window with related links inside that appears on mouseover of the marker. 该实验的目的是创建一个信息窗口，其中包含鼠标悬停在标记上方的相关链接。 You can then move the mouse inside the info window and interact and when you mouse out it will close the info window. 然后，您可以在信息窗口内移动鼠标并进行交互，当您将鼠标移出时，它将关闭信息窗口。 I've tried another method where the mouseover on the marker triggers an external function that creates an external info window element that's positioned and has its own event handling. 我尝试了另一种方法，鼠标悬停在标记上会触发一个外部函数，该函数创建一个外部信息窗口元素，该元素已定位并具有自己的事件处理。 That works fine, but the layering of the custom info window on top of the map means that when you mouse over another marker in close proximity (under the custom info window) it can't register the mouseover for the marker. 这样可以正常工作，但是在地图顶部自定义信息窗口的分层意味着当您将鼠标悬停在另一个标记上时（在自定义信息窗口下），它无法为鼠标注册鼠标悬停。

This was my attempt at the InfoBox method: 这是我对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>

So I guess if anyone knows how to make this work and respond properly (or provide relevant tips/tricks) then that would be great! 所以我想如果有人知道如何使这项工作和正确回应（或提供相关的提示/技巧）那么这将是伟大的！

Answer 1

I have had the same problem. 我曾经也有过一样的问题。 Just as you say the issue is that mouseout is triggered when moving to one of the child elements. 正如您所说的那样，问题是当移动到其中一个子元素时会触发mouseout。 The solution is to instead use mouseenter and mouseleave (jQuery needed), see this post for more information: Hover, mouseover and mouse out 解决方案是使用mouseenter和mouseleave（需要jQuery），有关更多信息，请参阅此帖子：悬停，鼠标悬停和鼠标移出

In this case it is not possible to use the google maps event listener (it does not support mouseenter). 在这种情况下，无法使用谷歌地图事件监听器（它不支持mouseenter）。 Instead you can attach a normal jQuery event, or use the hover function as shown in the following code: 相反，您可以附加正常的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

What happens is that I can locate the DIV and use a google.maps.event.addDomListener to attach a mouseover and mouseout event to the InfoBox, except it's too fiddly -- when I mouseover a child node within the InfoBox, it counts as a mouseout on the parent node and fires the event. 会发生什么事情是我可以找到DIV并使用google.maps.event.addDomListener将mouseover和mouseout事件附加到InfoBox，除非它过于繁琐 - 当我将鼠标移到InfoBox中的子节点时，它被视为一个在父节点上使用mouseout并触发事件。

A naive approach to overcome this could be to traverse the element tree up in your mouseout handler and to check whether you find the DIV or end up at the document root. 克服这种情况的一种天真的方法是在mouseout处理程序中遍历元素树，并检查是否找到DIV或最终到达文档根目录。 If you find the DIV, the mouse is still within the popup and you don't need to close it. 如果找到DIV，鼠标仍在弹出窗口内，您无需关闭它。

jQuery solves this problem nicely by introducing a second event, mouseleave , which behaves as you would expect it and is implemented in a similar manner as explained above. jQuery通过引入第二个事件mouseleave很好地解决了这个问题，该事件的行为与您期望的一样，并且以与上述类似的方式实现。 The jQuery sourcecode has a special closure withinElement for this case which may be worth looking at. 对于这种情况， 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