谷歌地图多边形悬停 - 在多边形鼠标悬停或信息窗口鼠标悬停时关闭信息窗口

Question

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

更新：

以下内容现在可以正常工作，但是有点“错误”。这是由于当用户实际上在多边形的中心（信息框弹出的位置）周围悬停时发生“mouseout”功能，脚本认为他们已将光标移出多边形，因为信息框图层加载在顶部。

代码：

// 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-events 和 infowindow 的 content-node。

在此处设置$infowindow_open-变量并运行关闭信息窗口的函数并在短时间内关闭信息窗口，这样用户就可以在多边形和信息窗口之间移动鼠标而无需关闭信息窗口。

Answer 2

只需使用下面的代码来处理多边形上的鼠标悬停事件

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

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

});

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