简体   繁体   中英

Mousing over Infobox fires hover event on markers that are behind it

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM