将信息悬停在Infobox上，将光标悬停在它后面的标记上 [英] Mousing over Infobox fires hover event on markers that are behind it

问题描述

我目前使用Google地图的InfoBox插件。不幸的是，我遇到了一个令人讨厌的问题。

我的应用上的用户可以通过将鼠标悬停在相应的标记上来打开信息框。这工作正常。 InfoBox打开并且用户将鼠标悬停时会出现此问题。出于某种原因，信息框下方的标记触发了它们的鼠标悬停事件。这是一个很大的问题，因为它在打开属于刚刚发起其鼠标悬停事件的标记的框之前关闭了当前框。我已经做了一些搜索，我发现将每个标记设置为：

 优化：false 
  

可以防止这个错误。但是，这个选项减慢了地图的速度，使得使用起来很麻烦。

我的信息框：

  infoWindows [obj.VehicleName] = new InfoBox（{
 content：contentString，
 disableAutoPan：false，
 maxWidth：500，
 pixelOffset：new google.maps.Size（-250，-490），
 boxStyle：{
 width：500px
}，
 enableEventPropagation：false，
 infoBoxClearance：new google.maps.Size（45，1）
}） ; 
  

我的听众：

  google.maps.event.addListener（marker，'mouseover'，function（）{
  

解决方案

丑陋的修复，因为没有任何广告选项（enableEventPropagation）似乎为我工作（我当然不想沿着使用优化：假在300多个标记上）

在每个标记的mouseover侦听器中，我会检查当前打开的InfoWindow是否被悬停在上面：

  google.maps.event.addListener（marker，'mouseover'，function（）{
 
 //如果一个InfoBox如果（openInfoBox！== null）{
 
 var id = $（openInfoBox.getContent（））。attr（'id'）; 
 // if if如果（$（'＃'+ id +'：hover'）。}）{
返回false; //不再进一步，即忽略，那么InfoBox中的主div现在被悬停在
之上标记
} 
 
} 
 
 //打开InfoBox等等等
  

I'm currently using the InfoBox plugin for Google Maps. Unfortunately, I've run into an annoying problem.

Users on my app can open an InfoBox by hovering over its corresponding marker. That works fine. The problem occurs when the InfoBox is open and the user is mousing over it. For some reason, the markers beneath the InfoBox are firing off their mouseover events. This is a big issue because it closes the current box before opening the box belonging to the marker that has just fired off its mouseover event. I've done some searching and I've found out that setting each marker to:

optimized: false

prevents this bug. However, this option slows down the map and makes it feel cumbersome to use.

My InfoBox:

infoWindows[obj.VehicleName] = new InfoBox({
    content: contentString,
    disableAutoPan: false,
    maxWidth: 500,
    pixelOffset: new google.maps.Size(-250, -490),
    boxStyle: {
         width: "500px"
    },
    enableEventPropagation: false,
    infoBoxClearance: new google.maps.Size(45, 1)
});

My listener:

google.maps.event.addListener(marker, 'mouseover', function() {

解决方案

Ugly fix because none of the advertised options (enableEventPropagation) seemed to be working for me (and I certainly didn't want to go down the route of using "optimized:false" on 300+ markers)

Inside the mouseover listener for each marker, I do a check to see if the currently-opened InfoWindow is being hovered over:

google.maps.event.addListener(marker, 'mouseover', function() {

    //If an InfoBox is currently open
    if(openInfoBox !== null){

        var id = $(openInfoBox.getContent()).attr('id');
        //If the main div inside that InfoBox is currently being hovered over
        if ($('#' + id + ':hover').length) {
            return false; //go no further. i.e. ignore mouseover event for marker
        }

    }

    //Open InfoBox etc etc

这篇关于将信息悬停在Infobox上，将光标悬停在它后面的标记上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！