Leaflet Mouseout called on MouseOver event

后端 未结 3 770
挽巷
挽巷 2021-02-19 05:26

I have a leaflet map where I\'m dynamically adding markers.

I want to call the popup for a marker when I hover over it in addition to when I click the marker.

My

相关标签:
3条回答
  • 2021-02-19 05:55

    I know it's an old thread but I've just came across this issue and I thought that I can share my solution. Instead of offsetting the popup, I am preventing the popup from stealing the mouse event using CSS by setting:

    .my-popup {pointer-events: none;}
    

    and assigning my-popup className to the popup:

    Marker.on('mouseover', function () {Marker.bindPopup('HI', {className: 'my-popup'}).openPopup();})
    

    I hope this helps someone :)

    0 讨论(0)
  • 2021-02-19 05:57

    I also recently came across this problem again too. In case this helps anyone: As of Leaflet 1.0, you can use L.Tooltip instead of popups with mouseover or other mouse-related events. I've found that it works much more smoothly than making a Popup, and uses less code, especially if you're just opening the popup on hover. In your case it might look like:

    function makeMarker(){
      var Marker = L.marker...
      Marker.bindTooltip('HI').openPopup();
    }
    

    And you can use the permanent boolean flag if you want to keep it open.

    In my case I didn't need the popup to open on click (in addition to hover), so that might be a little more complicated. However L.Tooltip has become very widely used and there are other SO questions that deal with this issue.

    0 讨论(0)
  • 2021-02-19 06:04

    The popup is actually loading underneath the cursor and 'stealing' the mouse from the Marker, triggering the Marker.mouseout() event, which causes the popup to close and re-triggers the Marker.mouseover() event... and the cycle continues which is why you see the 'flicker'.

    I have seen this happen depending on the zoom level (usually when zoomed right out).

    Try adding an offset into your popup options to get it out of the way:

    function makeMarker(){
       var Marker = L.marker...
       Marker.on('mouseover', function(){Marker.bindPopup('HI', {'offset': L.point(0,-50)}).openPopup();});
    
       Marker.on('mouseout', function(){Marker.closePopup();});
    }
    
    0 讨论(0)
提交回复
热议问题