Question

这看起来很简单，但我找不到解决方案。我有一个带有KML和多边形的Google Map。悬停在多边形上会显示一个信息框。如果用户将鼠标悬停在信息框上，则需要保持打开状态，但如果用户将鼠标悬停在信息框上，或者如果用户超出多边形，则信息框应该关闭。所以这听起来很简单，但目前我只能做其中一个。

更新：

以下现在正在运作，但它有点'越野车'。这是因为当用户实际悬停在多边形的中心（信息框弹出的位置）时发生“鼠标输出”功能，脚本认为他们已经将光标移出多边形，因为信息框层加载在顶部。 / p>

代码：

// User moves the cursor outside of the active polygon
         google.maps.event.addListener(poly,"mouseout",function() {

             $poly = this;
             $infowindow_hover = false;

             $("#geoxml3_infowindow").mouseenter(function(){
                    clearTimeout($(this).data('timeoutId'));
                    $infowindow_hover = true;

                }).mouseleave(function(){
                    var someElement = $(this),
                        timeoutId = setTimeout(function(){

                                $poly.infoWindow.close();


                        }, 500);
                    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
                    someElement.data('timeoutId', timeoutId); 
                });

            function closeInfoWindow()
            {
                if ($infowindow_hover == false) $poly.infoWindow.close();
            }

             setTimeout(closeInfoWindow, 1000)

     });

Answer 1

在关闭infoWindow之前，您需要延迟一段时间。

观察多边形的mouseover / mouseout事件和infowindow的content-node。

在那里设置$infowindow_open - 变量并运行以短暂延迟关闭infoWindow的函数，这样用户就可以在多边形和infowindow之间移动鼠标而不关闭infowindow。

Answer 2

只需使用下面的代码来处理多边形上的mouseout事件

google.maps.event.addListener(poly,"mouseout",function(e) {

    if (infoWindow) {
        infoWindow.close();
    }

});

假设var infoWindow = new google.maps.InfoWindow();是您的信息窗口对象。

Google Maps Polygon Hover - 关闭多边形鼠标移动或infowindow mouseout上的InfoWindow

2 个答案: