Popup bei Mouse-Over anzeigen, nicht bei Klick mit Leaflet?

37

Ist es im Leaflet möglich, dass ein Popup beim Mouse-Over und nicht beim Klicken geöffnet wird?

Dies funktioniert jeweils nur für einen Marker, aber ich benötige es für eine größere Anzahl von Markern:

marker.on('mouseover', function(e){
    marker.openPopup();
});

leaflet popup

— Gegenstrom
quelle

1

Wenn Sie zwei Fragen haben, öffnen Sie bitte zwei Threads, damit diese separat beantwortet werden können.

— Underdunkel

43

Wenn Sie das Popup für einen Marker anzeigen müssen, können Sie die bindPopup-Methode für Marker verwenden.

Dann haben Sie mehr Kontrolle und es wird automatisch an Ihren Marker gebunden.

Im folgenden Beispiel können Sie das Popup-Fenster anzeigen, wenn der Benutzer mit der Maus darüber fährt, und ausblenden, wenn der Benutzer mit der Maus darüber fährt:

        marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });

Hinweis: Möglicherweise treten Probleme beim Schließen der Popups auf, wenn Sie mit der Maus auf das Popup selbst fahren. Daher müssen Sie möglicherweise den Popup-Anker anpassen (siehe Popup-Einstellungen), damit Ihre Popups etwas weiter vom Marker selbst entfernt angezeigt werden zu leicht verschwinden.

— Tomislav Muic
quelle

4

Lösung, um das Popup sichtbar zu halten, wenn Sie mit der Maus darüber fahren - jsfiddle.net/sowelie/3JbNY

— rob-gordon

9

Dies wird dazu beitragen, Pop-up auf Marker Mouseover anzuzeigen

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});

— Sujeesh Balan
quelle

1

Vielen Dank! Dieser Code half mir bei etwas, das nichts mit dieser Frage zu tun hatte.

— Abbafei

6

Dies ist kein Flugblatt-spezifisches Problem, sondern eine Frage von Javascript.

Speichern Sie Ihre Markierungen in einer Sammlung und binden Sie openPopupsie dann 'mouseover'für alle an ein Ereignis.

Zum Beispiel mit einem Array:

var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>

for (var i = 0; i < markers.length; i++) {
    var currentMarker = markers[i];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}

— MattiSG
quelle

Meinung eher in einem Kommentar als in der Antwort: Ich halte die Verwendbarkeit von Popups auf einer Karte, bei denen der Cursor per Definition viel wandert, für fragwürdig. Möchten Sie wirklich, dass Ihre Benutzer die Wegfindung zwischen den Markierungen durchführen, um endlich die gewünschte zu erreichen, die sich jedoch immer hinter Popups verbirgt, wenn sie versuchen, den Cursor auf ihr Ziel zu bewegen?

— MattiSG

Dies ist leider nicht meine Wahl. Ich habe Marker wie neue L.MarkerClusterGroup mit Leaflet MarkerCluster gespeichert: var marker = new L.MarkerClusterGroup (); Würde diese Codierung, die Sie geschrieben haben, auch dafür funktionieren?

— Strom

@againstflow Ähm, dann solltest du deine Frage ändern. Sie werden nicht nur gefragt, ob Marker beim Hover geöffnet werden sollen, sondern auch, wie in einer L.MarkerClusterInstanz über Marker iteriert werden soll. Meine Antwort zeigt deutlich, wie Sie eine Sammlung von Popups beim Hover binden können. Wenn Sie wissen möchten, wie Sie eine Sammlung aus einem Cluster abrufen können, ist dies etwas anderes.

— MattiSG

6

Wenn Sie Leaflet 1.3.x verwenden, ist die Tooltip-Bindung eine integrierte Methode.

http://leafletjs.com/reference-1.3.0.html#tooltip

var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
    polyline.bindTooltip("tool tip is bound");

— Vollständig festgefahrener Entwickler
quelle

1

Fantastisch. Vermeidet vollständig den oben beschriebenen "Mouseover" / "Mouseout" -Jitter.

— Nick K9

bindTooltip()Funktioniert auch mit einzelnen Markern.

— S. Baggy

4

In Bezug auf eine Lösung, die "für eine größere Anzahl von Markern" funktioniert, ist dies das, was ich für jede Ebene von Punktdaten mache, die von GeoJSON geladen werden:

var layerPopup;
featureLayer.on('mouseover', function(e){
    var coordinates = e.layer.feature.geometry.coordinates;
    var swapped_coordinates = [coordinates[1], coordinates[0]];  //Swap Lat and Lng
    if (map) {
       layerPopup = L.popup()
           .setLatLng(swapped_coordinates)
           .setContent('Popup for feature #'+e.layer.feature.properties.id)
            .openOn(map);
    }
});
featureLayer.on('mouseout', function (e) {
    if (layerPopup && map) {
        map.closePopup(layerPopup);
        layerPopup = null;
    }
});

— JayCrossler
quelle

Nur neugierig, welche Art von Objekt ist FeatureLayer? Sieht so aus, als wäre dies eine großartige Lösung.

— Behr