Afficher un popup au survol de la souris, pas au clic en utilisant Leaflet?

37

Est-il possible dans Leaflet que la fenêtre contextuelle s'ouvre au survol de la souris et non au clic?

Cela ne fonctionne que pour un marqueur à la fois, mais j'en ai besoin pour un plus grand nombre de marqueurs:

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

leaflet popup

— contre-courant
source

1

Si vous avez deux questions, veuillez ouvrir deux discussions pour pouvoir y répondre séparément.

— underdark

43

Si vous devez afficher la fenêtre contextuelle d'un marqueur, vous pouvez utiliser la méthode bindPopup des marqueurs.

Ensuite, vous avez plus de contrôle et il sera automatiquement lié à votre marqueur.

Dans l'exemple ci-dessous, vous pouvez afficher la fenêtre contextuelle lorsque l'utilisateur passe la souris sur la souris et la masquer lorsque l'utilisateur la moque:

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

Remarque: vous pouvez rencontrer des problèmes avec la fermeture des popups lorsque vous passez la souris sur le popup lui-même. Vous devrez donc peut-être ajuster l'ancre du popup dans (voir Paramètres du popup) pour afficher vos popups un peu plus loin du marqueur lui-même. disparaître trop facilement.

— Tomislav Muic
source

4

Solution pour garder le popup visible en survolant

— rob-gordon

9

Cela aidera à afficher une fenêtre contextuelle sur le curseur de la souris

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

— Sujeesh Balan
source

1

Merci! ce code m'a aidé dans quelque chose sans rapport avec cette question.

— Abbafei

6

Ce n'est pas un problème spécifique à Leaflet, mais plutôt une question de Javascript.

Stockez vos marqueurs dans une collection, puis liez-les openPopupà un 'mouseover'événement.

Par exemple, avec un tableau:

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
source

Opinion dans un commentaire plutôt que dans la réponse: Je pense que la facilité d'utilisation des popups en survol sur une carte, où par définition votre curseur erre beaucoup, est discutable. Souhaitez-vous vraiment que vos utilisateurs fassent un cheminement entre les marqueurs pour atteindre celui qu'ils veulent mais restent toujours cachés derrière des fenêtres contextuelles lorsqu'ils tentent de déplacer leur curseur vers leur cible?

— MattiSG

Ce n'est pas mon choix, malheureusement. J'ai des marqueurs stockés comme les nouveaux L.MarkerClusterGroup avec Leaflet MarkerCluster: var marqueurs = new L.MarkerClusterGroup (); ce code que vous avez écrit fonctionnerait-il aussi?

— Contre

@ againstflow Erm, vous devriez alors changer de question. Vous ne demandez pas seulement d'ouvrir des marqueurs en survol, vous demandez également comment itérer sur des marqueurs dans une L.MarkerClusterinstance… Ma réponse montre clairement comment lier une collection de fenêtres contextuelles en survol. Si vous voulez savoir comment obtenir une collection à partir d'un cluster, c'est autre chose.

— MattiSG

6

Si vous utilisez Leaflet 1.3.x, la liaison d'infobulle est une méthode intégrée.

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");

— Développeur Entièrement Coincé
source

1

Fantastique. Évite totalement la gigue "mouseover" / "mouseout" décrite ci-dessus.

— Nick K9

bindTooltip()fonctionne aussi sur des marqueurs individuels.

— S. Baggy le

4

Pour ce qui est d'avoir une solution qui fonctionne "pour un plus grand nombre de marqueurs", voici ce que je fais pour chaque couche de données ponctuelles chargées depuis GeoJSON:

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
source

Juste curieux, quel type d'objet est featureLayer? On dirait que c'est une excellente solution.

— Behr