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

Question

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

我正在使用Google Maps API的v3并使用InfoBox插件(http://google-maps-utility-library-v3.googlecode.com/套件的一部分)来制作一些设计精美的信息窗口对标记物相互作用有反应.

对于这个特定的实验,我试图在标记被盘旋出来时弹出InfoBox窗口,但是我很难在InfoBox窗口上解决有关鼠标悬停/鼠标移动的事件系统的问题.发生的事情是我可以找到DIV并使用a google.maps.event.addDomListener将mouseover和mouseout事件附加到InfoBox,除非它过于繁琐 - 当我将鼠标悬停在InfoBox中的子节点时,它将被视为父节点上的mouseout并触发事件.

这在某种程度上与传播有关吗？我知道InfoBox enableEventPropagation在创建一个新的InfoBox时有一个开关,但是我不太确定如何以及为什么要使用它.

该实验的目的是创建一个信息窗口,其中包含鼠标悬停在标记上方的相关链接.然后,您可以在信息窗口内移动鼠标并进行交互,当您将鼠标移出时,它将关闭信息窗口.我尝试了另一种方法,鼠标悬停在标记上会触发一个外部函数,该函数创建一个外部信息窗口元素,该元素已定位并具有自己的事件处理.这样可以正常工作,但是在地图顶部自定义信息窗口的分层意味着当您将鼠标悬停在另一个标记上时(在自定义信息窗口下),它无法为鼠标注册鼠标悬停.

这是我对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>

Run Code Online (Sandbox Code Playgroud)

所以我想如果有人知道如何使这项工作和正确回应(或提供相关的提示/技巧)那么这将是伟大的!

Answer 1

小智 11

我曾经也有过一样的问题.正如您所说的那样,问题是当移动到其中一个子元素时会触发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();
        }
    );
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	16313 次
最近记录：	12 年前