将鼠标悬停在标记上时未触发 GMaps“mouseout”事件答案

【问题标题】：GMaps "mouseout" event not firing when hovering over marker将鼠标悬停在标记上时未触发 GMaps“mouseout”事件
【发布时间】：2014-01-29 16:06:39
【问题描述】：

我有一个事件监听器在我的谷歌地图对象上监听“mouseout”事件。这在大多数情况下都很有效，因为它会在光标离开地图边界时触发。

但是，如果在地图边缘的光标离开它的地方有一个标记，那么它就不会触发。请参阅此图片以获取说明：

有人知道解决这个问题的方法吗？

【问题讨论】：

您可以为mouseover设置标记事件监听器，为地图对象设置触发事件mouseout。
你能提供一个演示吗？对我来说，当我通过标记（或任何其他类型的覆盖）离开地图时，mouseout 也会触发。你用什么浏览器？
@AntoJurković 不幸的是，这不适用于我的情况，因为我每次击中标记时都无法触发此事件。
@Dr.Molle 我无法真正提供演示，因为它是一个非常复杂的应用程序，很难剥离并且不允许共享。我只在 Chrome 中出现此问题。在 Firefox 和 IE11 中运行良好。
由于缺少重现问题的代码而投反对票。

标签： javascript jquery google-maps google-maps-api-3

【解决方案1】：

我最终使用谷歌地图事件监听器解决了这个问题：

this.cursorLeavesMapListener = new google.maps.event.addListener(this.mapObject.gObj, "mouseout", function(e){thisStageMachine.cursorLeftMap()});

还有这个类：

(function(window)
{
    function cursorState(stageMachine)
    {
        this.stageMachine = stageMachine;
        this.state = "out";

        this.currentCheckStateTimer = null;
        var thisCursorState = this;
        this.stageMachine.mapObject.mapDOMDiv.addEventListener("mouseover", function(e){ thisCursorState.setInMapState() });
        this.stageMachine.mapObject.mapDOMDiv.addEventListener("mouseout", 
            function(e){ 
                thisCursorState.setOutOfMapState(); 
                window.clearTimeout(thisCursorState.currentCheckStateTimer);
                thisCursorState.currentCheckStateTimer = window.setTimeout( function(){thisCursorState.checkState()},   100);
            });
    }

    cursorState.prototype.setInMapState = function()
    {
        this.state = "in";
    }

    cursorState.prototype.setOutOfMapState = function()
    {
        this.state = "out";
    }

    cursorState.prototype.checkState = function()
    {
        if(this.state=="out")
        {
            this.stageMachine.cursorLeftMap();
        }
    }

    window.cursorState = cursorState;
}(window));

您需要这种带有 DOM 版本的 mouseover 和 mouseout 的奇怪结构，因为当您在地图上移动光标时它们会不断触发。它可能与谷歌地图如何将瓦片添加到 DOM 有关。但是，当您的鼠标离开地图时，只会触发 mouseout 事件，因此您需要在 100 毫秒后检查是否没有触发新的 mouseover 事件（因为我们上次触发 mouseout）以确保我们实际上已经离开了地图当 mouseout 被触发时。这显然很 hacky，但它就像一个魅力。

两者中的一个总是触发。

如果有人有更优雅的解决方案，请分享。

【讨论】：