Wie kann der Leaflet-Marker nur für Klickereignisse interaktiv gemacht werden?

Question

Ich hätte gerne einen Marker (mit DivIcon-Symbol), der keine Mausereignisse außer Klicks erfasst. Ist das machbar und wie erreicht man es?

Hier ist eine Geige, die das Problem zeigt: https://jsfiddle.net/A1an/dcut125e/ - Das Symbol auf der Karte sollte sichtbar bleiben, wenn der Mauszeiger den Text im Polygon kreuzt, sollte aber auch auf Klickereignisse reagieren.

auch ohne Erfolg mit bubblingMouseEvents Versuchte:

iconLabel=L.divIcon({html:"This text blocks events"}); 
labeledMarker=L.marker([39.83711,-3.464459], {icon:iconLabel, bubblingMouseEvents:true}); 
labeledMarker.addTo(map); 

Alle Richtungen auch anerkannt werden würde!

Answer 1

Abgesehen davon, dass am Ende einer Zeile ein Semikolon fehlt, haben Sie vergessen, alle Click Event-Handler zum L.DivIcon hinzuzufügen, den Sie dem Polygon hinzugefügt haben.

Sie müssen auch die Syntax new L.DivIcon verwenden, um sicherzustellen, dass Sie eine neue L.DivIcon instanziieren.

Ich habe deine Geige here aktualisiert, die jetzt die zeigt Kartenmarkierung Symbol hält, wenn sie über die L.DivIcon schwebt, und zwei Klickereignisse angebracht, die erkennen, wenn Sie auf das Polygon selbst sind, klicken für die Divicon ihm hinzugefügt.

Answer 2

Es stellt sich heraus, dass es nicht möglich ist, einen Marker nur für bestimmte Ereignisse interaktiv zu machen, da er das css-Attribut Zeiger-Ereignisse verwendet, um es interaktiv zu machen oder nicht, was wiederum nicht angibt, welche Ereignisse ausgegeben werden alles oder nichts.

Stattdessen können Ereignisse auf dem zugrunde liegenden Element explizit ausgelöst werden, sodass das Label so wirkt, als wäre es nicht für solche Ereignisse vorhanden. Der Trick nutzt die Technik, das Label zu verstecken, das nächste Element an den Mauskoordinaten abzurufen, dann das Label wiederherzustellen und schließlich ein neues Event auf dem zugrunde liegenden Element auszulösen. Leider scheint dies nicht in einem jsfiddle zu arbeiten, sondern wirkt wie ein Zauber in der realen App

labeledMarker.on('mouseover',function(e) { 
      old_disp=e.target._icon.style.display; 
      e.target._icon.style.display='none'; 
      offset={top: e.originalEvent.clientY, left:e.originalEvent.clientX}; 
      underlying = document.elementFromPoint(offset.left,offset.top); 
      e.target._icon.style.display=old_disp; 
      var ev = document.createEvent('MouseEvent'); 
      ev.initEvent("mouseover",true,true); 
      ev.target = underlying; 
      underlying.dispatchEvent(ev); 
     });